清除canvas画布内容(点擦除+线擦除)

发布时间：2020-08-19 02:17 所属栏目：115 来源：网络整理

导读：

导读：这篇文章主要介绍了清除canvas画布内容(点擦除+线擦除)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着

由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：（此方法仅限需要清除全部内容的情况）

var c=document.getElementById("myCanvas"); c.width=c.width;

2、clearRect

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,50);

3、globalCompositeOperation

引用globalCompositeOperation()函数，这个函数是用来在画布上组合颜色，我们可以利用这个原理，叠加(数学上的"或"原理)来制作橡皮。

首先看看globalCompositeOperation属性可以设置的值有哪些，分别是什么效果：

值描述
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
xor 使用异或操作对源图像与目标图像进行组合。

<!DOCTYPE html> <html> <head> <style> canvas { border:1px solid #d3d3d3; margin-right:10px; margin-bottom:20px; } </style> </head> <body> <script> var gco=new Array(); gco.push("source-atop"); gco.push("source-in"); gco.push("source-out"); gco.push("source-over"); gco.push("destination-atop"); gco.push("destination-in"); gco.push("destination-out"); gco.push("destination-over"); gco.push("lighter"); gco.push("copy"); gco.push("xor"); for (n=0;n<gco.length;n++) { document.write("<div>" + gco[n] + ":<br>"); var c=document.createElement("canvas"); c.width=120; c.height=100; document.getElementById("p_" + n).appendChild(c); var ctx=c.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,50,50); ctx.globalCompositeOperation=gco[n]; ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(50,50,30,0,2*Math.PI); ctx.fill(); document.write("</div>"); } </script> </body> </html>

可以看出如果设置成destination-out，就可以清除canvas现有的像素点的图像。

清除绘制到画布上的线条（点擦除，线擦除）

　　在我最近实现的项目中有画笔功能，同时画笔画出的线条可以被橡皮擦擦除，有点擦除和线擦除两种方式。

　　使用以上两种方法也可以，但是如果这些线条不止绘制一次的话呢，中间有其他操作（例如绘制的内容变换一次后）那上面的方法就不容易做到了，因为要反复绘制存储每次擦除后的数据，简单的为了能达到该目的，可以将整个canvas画布转化成base64编码的image，后面再次绘制的时候把这个image数据再绘制到canvas上，可以继续在这个canvas上进行绘制和擦除内容。但是怎么样也不好做到线擦除的功能了！

　　下面介绍另外一种存储绘制路径点坐标的方法去实现绘制线条后的点擦除和线擦除的功能。

　　首先介绍下存储线条的数据结构，之前写的一篇《js实现存储对象的数据结构hashTable和list》大家可以先大致看看hash结构的实现，但是key和value快速查找的优势需要清楚。另外在canvas画的各种形状和线条，我们是如何知道点击到哪个元素哪条线？《软件项目技术点(4)——实现点击画布上元素》这篇博客里有说明实现原理。

1. 线条存储及绘制

项目中我存储的线条hash结构的对象如下：

展开第一个线条key值为“#8c471a”的具体信息如下，value值其中有colorKey，lineColor，lineWidth，以及最重要的List结构的points对象，是一个存储了该线条所有点坐标集合的List对象。

下面的一段代码，实现了绘制该线条到画布。使用二次贝塞尔函数使得绘制出来的线条流畅平滑没有折痕，当只有一个点时可绘制出一个圆点。

（编辑：ASP站长网）