清除canvas画布内容(点擦除+线擦除)
|
副标题[/!--empirenews.page--]
由于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属性可以设置的值有哪些，分别是什么效果：
值
描述
<!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对象。 下面的一段代码，实现了绘制该线条到画布。使用二次贝塞尔函数使得绘制出来的线条流畅平滑没有折痕，当只有一个点时可绘制出一个圆点。 （编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
