html5的canvas知识总结（7）clip、globalCompositeOperation、drawImage、toDataURL、getImageData、putImageData

Dear 丶 2022-05-12 06:20 200阅读 0赞

**复习知识：**

beginPath() ：开启一个新的路径，在画直线的时候，需要开启一个新的路径，在上一个路径下，移动画笔位置

closePath()：闭合路径，在画图的时候，直接将未连接的图形，闭合连接

**1. clip() 方法：从原始画布中剪切任意形状和尺寸**

![70][]

![70 1][]

注意：clip()方法会将他上面代码所绘制的图形的区域裁剪，在裁剪区内的内容会显示，裁剪区之外的内容不会显示。

用beginPath()方法开启新的路径，新的路径同样会受到影响，因为新路径的理解是：在上一个路径下移动画笔。

而save()和restore()方法，入栈和出栈的方式，使裁剪区无法影响后续的图形绘制。

注意：clip()方法，只对 fill()或者stroke() 方法生效，不能使用fillRect、strokeRect等方法。

**入栈和出栈：**

![70 2][]![70 3][]

**2. 合成**

**globalCompositeOperation 属性：设置一个源（新的）图像绘制到目标（已有）的图像上。**

![70 4][]

![70 5][]

**值的样式：**

（1）新图在上

原图区域                  重叠区域               除去原图区域       原图和新图区域（默认）

![70 6][]

（2）新图在下

原图区域                   重叠区域                除去新图区域         原图和新图重叠区域

![70 7][]

（3）

重叠区域颜色混合      保留新图              重叠区域透明

![70 8][]

**注意：如果不设置globalCompositeOperation，那么将继承上面离他最近的globalCompositeOperation值**

![70 9][]

![70 10][]

**3. globalAlpha属性，图片透明度**

**会作用到后续的每个图片上，除非用save、restore；**

![70 11][]

![70 12][]

**4. drawImage() 方法在画布上绘制图像、画布或视频。**

（1）在画布上定位图像：drawImage(*img*,*x*,*y*);

**图片从canvas坐标的（-50, -50）的位置开始插入**

![70 13][]

![70 14][]

（2）在画布上定位图像，并规定图像的宽度和高度：*context*.drawImage(*img*,*x*,*y*,*width*,*height*);

**图片从canvas画布的（0,0）插入，并设置（不是裁剪）了图片宽高：100 100，**

**注意：是将原始图片的宽高，设置为100,100；图片还是完整的。不是将原始图片裁剪100,100的大小。**

![70 15][]

![70 16][]

（3）剪切图像，并在画布上定位被剪切的部分：*context*.drawImage(*img*,*sx*,*sy*,*swidth*,*sheight*,*x*,*y*,*width*,*height*);

<table> 
 <tbody> 
  <tr> 
   <td><em>img</em></td> 
   <td>规定要使用的图像、画布或视频。</td> 
  </tr> 
  <tr> 
   <td><em>sx</em></td> 
   <td>可选。开始剪切的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>sy</em></td> 
   <td>可选。开始剪切的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>swidth</em></td> 
   <td>可选。被剪切图像的宽度。</td> 
  </tr> 
  <tr> 
   <td><em>sheight</em></td> 
   <td>可选。被剪切图像的高度。</td> 
  </tr> 
  <tr> 
   <td><em>x</em></td> 
   <td>在画布上放置图像的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>y</em></td> 
   <td>在画布上放置图像的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>width</em></td> 
   <td>可选。要使用的图像的宽度。（伸展或缩小图像）</td> 
  </tr> 
  <tr> 
   <td><em>height</em></td> 
   <td>可选。要使用的图像的高度。（伸展或缩小图像）</td> 
  </tr> 
 </tbody> 
</table>

**从图片上（0,0）的位置，裁剪宽50高50的图片，然后放在canvas画布上，放在（0,0）的位置， 宽100高100的区域内。**

![70 17][]

![70 18][]

**5. canvas内容导出**

**toDataURL()：是canvas自身的方法，不是上下文对象的方法**

**注意：base64编码格式的图片链接，减少网络请求。但是base64格式代码过长，常用于离线提示的小图片。**

![70 19][]

**受同源策略影响，在服务器下打开才能看到插入的链接是base64的图片，服务器内本文件请求自己的资源。**

![70 20][]

**6. getImageData() 方法：获取画布上的像素数据；putImageData()方法： 将像素数据放回画布**

这个两个方法受同源策略影响，需要在服务器中打开文件，进行请求数据操作。

通过得到画布上的像素数据，进行处理，再放回到画布上，就可以对画布上的内容进行处理改变。

（1）**getImageData(x, y, w, h) 方法：获取画布上的像素数据**

![70 21][]

![70 22][]

可以看出，ctx.getImageData(50,50, 50, 50)的值是一个**ImageData对象**，对象下有**data对象**，**共50\*50\*4（rgba）10000数值**。

此处的**a范围：0-255，**还有**width 和 height属性**

（2）**putImageData()方法： 将像素数据放回画布**

注意data对象的构造：如果是400个数据值，那么每组100个数据，分成4组；

![70 23][]

把canvas一块区域的透明度变为170；

![70 24][]

![70 25][]

上面用到了一个简单的算法：**根据data数据特性**

![70 26][]

**特别注意：data是对象，上面图片的这种写法，是为了让用户更好的查看，**

**格式是：data\[0\],data\[1\],data\[2\],data\[3\],data\[4\],data\[5\],data\[6\],data\[7\],data\[8\],data\[9\]...**

那么上面对canvas透明的处理，其实就可以**不用那么麻烦了**

![70 27][]

![70 28][]

由此引出了**图片的高斯模糊和滤镜效果：**

[70]: /images/20220512/aec27e09a7f44642a43fdd1418c1ec7b.png
[70 1]: /images/20220512/2cbe307cdf94456c8ee06e35f5f01ba8.png
[70 2]: https://img-blog.csdn.net/20180915110259817?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220512/b6d68b7ec38d48548dff2916a3d5f283.png
[70 4]: /images/20220512/7e705bd7be67486ba38c2f077b4d2b33.png
[70 5]: /images/20220512/e4fe06c1ba5f4dd6b66cb7a8ce6de901.png
[70 6]: /images/20220512/0cfd2ec9cefc4bd3b2ebe42591b72356.png
[70 7]: /images/20220512/48b23f9df472410286599544cecfa970.png
[70 8]: /images/20220512/e9e24b249cd14d2fa50aa307a50cc086.png
[70 9]: /images/20220512/060a12e85ea441f48b3bf5eab016e47a.png
[70 10]: /images/20220512/c105505abff8483dba04812ffa235688.png
[70 11]: /images/20220512/a7a2435c00ef43338a6cd914d55aae6b.png
[70 12]: /images/20220512/babe7b12e5774c5ea9050f56215ce637.png
[70 13]: /images/20220512/4fb4653880f74aecbbc04cf29a792dfd.png
[70 14]: /images/20220512/f8b2a4bf579b4c94ba003a64a5061542.png
[70 15]: /images/20220512/3fd87fad3db7467b98051d2de0a22a16.png
[70 16]: /images/20220512/67cd5dc597b34fd993715ebfff77b260.png
[70 17]: /images/20220512/9990fd15f42d4611ad014e1be9641e79.png
[70 18]: /images/20220512/02fe2a0594d242b7bfda94d3f1bfd7df.png
[70 19]: /images/20220512/40ec3cec591b465eac4ae7baa057dac2.png
[70 20]: /images/20220512/d8035d741f4547029d9c1334cc2b4b7b.png
[70 21]: /images/20220512/3f08fefc4e5e4ed3ace4848f144c2d17.png
[70 22]: /images/20220512/a772b3ebaef8445590a63b517442d342.png
[70 23]: /images/20220512/0cd20ed0e5ac49a894796995c8c3eabe.png
[70 24]: /images/20220512/818c952b71dc455aa6517f6e45b42a60.png
[70 25]: /images/20220512/fe91b2f425854577a730b72850252372.png
[70 26]: /images/20220512/e4cfbe5ade414ccba9a165cb7ce2d5fd.png
[70 27]: /images/20220512/e0fe8275d81c4a71803461fec4689f6a.png
[70 28]: /images/20220512/74b0df7a73c14b2580844803c9211829.png