HTML5(六)——Canvas 高级操作

任云峰 發表於 2021-8-4 17:25:00

上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形，这节开始介绍canvas的高级操作。
<h2 class="pgc-h-arrow-right" data-track="2">一、canvas 转换</h2>
canvas 转换常用的几种方法介绍，如下：
<div class="tableWrapper">
<div class="syl-shadow-provider">
<div class="syl-table-wrap">
<table><colgroup><col><col></colgroup>
<tbody>
<tr>
<td>
方法
</td>
<td>
描述
</td>
</tr>
<tr>
<td>
scale()
</td>
<td>
缩放当前绘图至更大或更小。
</td>
</tr>
<tr>
<td>
rotate()
</td>
<td>
旋转当前绘图。
</td>
</tr>
<tr>
<td>
translate()
</td>
<td>
重新映射画布上的 (0,0) 位置。
</td>
</tr>
<tr>
<td>
transform()
</td>
<td>
替换绘图的当前转换矩阵。
</td>
</tr>
<tr>
<td>
setTransform()
</td>
<td>
将当前转换重置为单位矩阵。然后运行 transform()。
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
1.1 、scale - 缩放
使用语法：scale(x,y)
x：表示水平方向的缩放倍数
y：表示垂直方向的缩放倍数
eg：canvas 绘制的矩形框放大两倍，代码如下：
<div class="cnblogs_code">
<pre>var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.scale(2,2)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)</pre>
</div>
 
1.2、translate - 画布平移
使用语法：translate(x,y)
x：添加到水平坐标上的位置
y：添加到垂直坐标上的位置
设置之后开始绘制的图片位置从(x,y)算起。
eg：绘制两个一样的矩形，一个在平移前绘制，一个在平移后绘制，代码如下：
<div class="cnblogs_code">
<pre>var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle="red"

ctx.fillRect(0,0,200,200)
//平移
ctx.translate(200,200)
ctx.fillRect(0,0,200,200)</pre>
</div>
运行结果如图：
<div class="pgc-img"><img alt="HTML5(六)——Canvas 高级操作" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/94f9919816944aa4bfa8f0bc4f5bb70e?from=pc">
 
</div>
1.3 、rotate - 旋转
使用语法：rotate(angle)
angle 旋转弧度，如果想使用角度，可以把角度转成弧度，公式为：deg * Path.PI/180。
eg：将一个矩形旋转45度，代码如下：
<div class="cnblogs_code">
<pre>var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
//旋转45度
ctx.rotate(45*Math.PI/180)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)</pre>
</div>
 
运行结果如图：
<div class="pgc-img"><img alt="HTML5(六)——Canvas 高级操作" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/5543a134087f40c5861c58dd3a303013?from=pc">
 
</div>
根据上述结果我们发现旋转的时候，默认原点是画布的起始点，我们想要的旋转是在矩形框中心为原点的旋转，此时我们需要借助上translate平移，重置一下原点，修改上述代码为：
<div class="cnblogs_code">
<pre><canvas width="400" height="400" id="canvas"></canvas>

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.translate(200,200)
ctx.rotate(45*Math.PI/180)
ctx.translate(-200,-200)

ctx.fillStyle="red"
ctx.fillRect(100,100,200,200)</pre>
</div>
运行结果如图：
<div class="pgc-img"><img alt="HTML5(六)——Canvas 高级操作" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/b60f2108fa904bdabc82afac6d535319?from=pc">
 
</div>
1.4、transform - 矩阵变换
使用语法：transform(a,b,c,d,e,f)
<ul>
<li data-track="47">a:水平缩放</li>
<li data-track="48">b:水平倾斜</li>
<li data-track="49">c:垂直倾斜</li>
<li data-track="50">d:垂直缩放</li>
<li data-track="51">e:水平移动</li>
<li data-track="52">f:垂直移动</li>
</ul>
transform可以替代前边平移、缩放、旋转三者，如下：
<pre class="syl-page-code hljs php"><code>// 平移
translate(x,y) <=> transform(1,0,0,1,x,y) <=> transform(0,1,1,0,x,y)</code></pre>
<pre class="syl-page-code hljs php"><code>// 缩放
sacle(x,y) <=> transform(x,0,0,y,0,0) </code></pre>
<pre class="syl-page-code hljs javascript"><code>// 旋转
rotate(angle) <=> transform(Math.cos(angle*Math.PI/180), Math.sin(angel*Math.PI/180), -Math.sin(angle*Math.PI/180), Math.cos(angle*Math.PI/180))</code></pre>
1.5、setTransform - 矩阵变换
setTransform()方法将变换的矩阵进行重置，它把当前的变换矩阵重置为单位矩阵 使用语法：transform(a,b,c,d,e,f) 各参数说明：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动
setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。
<h2 class="pgc-h-arrow-right" data-track="60">二、canvas 操作图片</h2>
drawImage() 在画布上绘制图像、画布或视频。也能够绘制图片的一部分，增加或减少图像的尺寸。以下是三种常见使用语法：
<ul>
<li data-track="65">语法1：drawImage( img , x , y )</li>
<li data-track="67">语法2：drawImage( img , x , y , width , height )</li>
<li data-track="68">语法3：drawImage( img , sx , sy , swidth, sheight , x , y , width , height )</li>

</ul>
上述参数表示的意义如下：
<div class="tableWrapper">
<div class="syl-shadow-provider">
<div class="syl-table-wrap">
<table><colgroup><col><col></colgroup>
<tbody>
<tr>
<td>
参数

</td>
<td>
描述

</td>

</tr>
<tr>
<td>
img

</td>
<td>
规定要使用的图像、画布或视频。

</td>

</tr>
<tr>
<td>
sx

</td>
<td>
可选。开始剪切的 x 坐标位置。

</td>

</tr>
<tr>
<td>
sy

</td>
<td>
可选。开始剪切的 y 坐标位置。

</td>

</tr>
<tr>
<td>
swidth

</td>
<td>
可选。被剪切图像的宽度。

</td>

</tr>
<tr>
<td>
sheight

</td>
<td>
可选。被剪切图像的高度。

</td>

</tr>
<tr>
<td>
x

</td>
<td>
在画布上放置图像的 x 坐标位置。

</td>

</tr>
<tr>
<td>
y

</td>
<td>
在画布上放置图像的 y 坐标位置。

</td>

</tr>
<tr>
<td>
width

</td>
<td>
可选。要使用的图像的宽度。（伸展或缩小图像）

</td>

</tr>
<tr>
<td>
height

</td>
<td>
可选。要使用的图像的高度。（伸展或缩小图像）

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>
eg：利用语法3，进行绘制图片的部分内容，实现如下效果：
<div class="pgc-img"><img alt="HTML5(六)——Canvas 高级操作" class="syl-page-img lazyload" data-src="https://p3-tt.byteimg.com/origin/pgc-image/2084277ffb7847d1b99adecf78d20173?from=pc">
 

</div>
给上述兔子顺便加一个点击屏幕暂停开始功能，完整代码如下：
<div class="cnblogs_code">
<pre><canvas width="400" height="400" id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var img = new Image()
let pause = false,frameCounter = 0,i=0;
img.src = "./rotate.png"
img.onload = function(){
requestAnimationFrame(next)
}
function next(){
ctx.clearRect(0,0,canvas.width,canvas.height)
if(frameCounter%5 == 0){ //frameCounter 控制动画速度
i++
if(i==11)i=0
}
ctx.drawImage(img,
0,i*240,240,240,
0,0,240,240) // 每张图片宽高都是240，具体参数根据图片而定
frameCounter ++
if(!pause)requestAnimationFrame(next)
}
window.onclick = function(){
pause = !pause
next()
}
</script></pre>
</div>
 
eg：使用 canvas 画布处理视频，使用定时器绘制视频的当前帧，连续起来就是一个视频，需要注意的是必须处理暂停和开始播放两种操作，具体代码如下：
<div class="cnblogs_code">
<pre>var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);</pre>
</div>
 
<h2 class="pgc-h-arrow-right" data-track="102">三、像素级操作</h2>
常见的像素级的操作有三种：
<ul>
<li data-track="98">getImageData() - 获取画布像素数据</li>
<li data-track="99">createImageData() - 创建新的、空白像素</li>
<li data-track="100">putImageData() - 图像像素数据放回画布</li>
</ul>
3.1、getImageData
使用语法：getImageData( x , y , width , height )
<ul>
<li data-track="106">x：要被提取的图像数据矩形区域的左上角 x 坐标。</li>
<li data-track="107">y：要被提取的图像数据矩形区域的左上角 y 坐标。</li>
<li data-track="108">width：被提取的图像数据矩形区域的宽度</li>
<li data-track="109">height：被提取的图像数据矩形区域的高度</li>
</ul>
返回一个 imageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过像素表示，起点是( x , y )，宽高为 widht 和 height 。
imageData 对象包含三个属性：
<ul>
<li data-track="113">imageData.height - 像素描述的矩形实际高度。</li>
<li data-track="114">imageData.width - 像素描述的矩形实际宽度。</li>
<li data-track="115">imageData.data - 包含 rgba 顺序数据的一个数组，数据使用0-255直接整数表示。</li>
</ul>
3.2、createImageData
使用语法：
createImageData( width , height )
创建一个空白的 imageData 对象，新对象的默认像素值 transparent black。对于imageData对象中的每个像素值，都存在 rgba 这四方面的信息，即：
<ul>
<li data-track="120">r - 红色（0-255）</li>
<li data-track="121">g - 绿色（0-255）</li>
<li data-track="122">b - 蓝色（0-255）</li>
<li data-track="123">a - alpha（0-255,0是透明，255是完全可见）</li>
</ul>
新对象默认像素值为（0,0,0,0）。
eg：如果我们想把 imageData 中一个像素变为红色时，可以改变第一和第四位信息，代码如下：
<div class="cnblogs_code">
<pre>var imageData = ctx.createImageData(100,100)
imageData.data[0] = 255
imageData.data[1] = 0
imageData.data[2] = 0
imageData.data[3] = 255</pre>
</div>
 
3.1、putImageData
使用语法：
putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );
参数及意义：
<div class="tableWrapper">
<div class="syl-shadow-provider">
<div class="syl-table-wrap">
<table><colgroup><col><col></colgroup>
<tbody>
<tr>
<td>
参数
</td>
<td>
描述
</td>
</tr>
<tr>
<td>
imgData
</td>
<td>
规定要放回画布的 ImageData 对象。
</td>
</tr>
<tr>
<td>
x
</td>
<td>
ImageData 对象左上角的 x 坐标，以像素计。
</td>
</tr>
<tr>
<td>
y
</td>
<td>
ImageData 对象左上角的 y 坐标，以像素计。
</td>
</tr>
<tr>
<td>
dirtyX
</td>
<td>
可选。水平值（x），以像素计，在画布上放置图像的位置。
</td>
</tr>
<tr>
<td>
dirtyY
</td>
<td>
可选。水平值（y），以像素计，在画布上放置图像的位置。
</td>
</tr>
<tr>
<td>
dirtyWidth
</td>
<td>
可选。在画布上绘制图像所使用的宽度。
</td>
</tr>
<tr>
<td>
dirtyHeight
</td>
<td>
可选。在画布上绘制图像所使用的高度。
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
通过 getImageData 复制的指定矩形像素数据，编辑之后，通过 putImageData 方法将图像数据放回画布上。
eg：添加滤镜效果：上述兔子是白色的变换成红色兔子，这时需要把绿色和蓝色都设置成0即可，代码如下：
<div class="cnblogs_code">
<pre><canvas width="400" height="400" id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var img = new Image()
let w = canvas.width,h = canvas.height;
img.src = "./rotate.png"
img.onload = function(){
ctx.drawImage(img,0,0,240,240,0,0,240,240)
let imageData = ctx.getImageData(0,0,w,h)
for(let r=0;r<w;r++){
for(let c=0;c<h;c++){
imageData.data[(r*w+c)*4+2 ] = 0 // 把蓝色设置成0
imageData.data[(r*w+c)*4+1] = 0 // 把蓝色设置成0
}
}
ctx.putImageData(imageData,0,0)
}
</script></pre>
</div>
  
来源：https://www.cnblogs.com/web-learn/p/15099949.html

頁: [1]

琼殿技术论坛's Archiver

HTML5(六)——Canvas 高级操作