清除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工具。 下面的一段代码，实现了绘制该线条到画布。行使二次贝塞尔函数使得绘制出来的线条流通滑腻没有折痕，当只有一个点时可绘制出一个圆点。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
