清除canvas画布内容 |
您所在的位置：网站首页 › matplotlib清除画布 › 清除canvas画布内容 |
清除canvas画布内容
|
清空canvas画布内容
1、重置宽或高
由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：（此方法仅限需要清除全部内容的情况） var c=document.getElementById("myCanvas"); c.width=c.width;2、clearRect 1 var c=document.getElementById("myCanvas"); 2 var ctx=c.getContext("2d"); 3 ctx.fillStyle="red"; 4 ctx.fillRect(0,0,300,150); 5 ctx.clearRect(20,20,100,50);
引用globalCompositeOperation()函数，这个函数是用来在画布上组合颜色，我们可以利用这个原理，叠加(数学上的"或"原理)来制作橡皮。 首先看看 globalCompositeOperation属性可以设置的值有哪些，分别是什么效果： 值描述source-over默认。在目标图像上显示源图像。source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。source-in在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。source-out在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。destination-over在源图像上方显示目标图像。destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。lighter显示源图像 + 目标图像。copy显示源图像。忽略目标图像。xor使用异或操作对源图像与目标图像进行组合。 1 2 3 4 5 canvas 6 { 7 border:1px solid #d3d3d3; 8 margin-right:10px; 9 margin-bottom:20px; 10 } 11 12 13 14 15 16 17 var gco=new Array(); 18 gco.push("source-atop"); 19 gco.push("source-in"); 20 gco.push("source-out"); 21 gco.push("source-over"); 22 gco.push("destination-atop"); 23 gco.push("destination-in"); 24 gco.push("destination-out"); 25 gco.push("destination-over"); 26 gco.push("lighter"); 27 gco.push("copy"); 28 gco.push("xor"); 29 for (n=0;n= 2) { 17 ctx.moveTo(p.x, p.y); 18 for (var i = 1; i < count - 2; i++) { 19 // p = this.points.get(i); 20 // ctx.lineTo(p.x, p.y); 21 if (this.points.get(i).x == this.points.get(i + 1).x && this.points.get(i).y == this.points.get(i + 1).y) 22 continue; 23 var c = (this.points.get(i).x + this.points.get(i + 1).x) / 2; 24 var d = (this.points.get(i).y + this.points.get(i + 1).y) / 2; 25 ctx.quadraticCurveTo(this.points.get(i).x, this.points.get(i).y, c, d); //二次贝塞曲线函数 26 } 27 // For the last 2 points 28 if (count >= 3) { 29 ctx.quadraticCurveTo( 30 this.points.get(i).x, 31 this.points.get(i).y, 32 this.points.get(i + 1).x, 33 this.points.get(i + 1).y 34 ); 35 } else if (count >= 2) { 36 ctx.lineTo(this.points.get(1).x, this.points.get(1).y); 37 } 38 ctx.stroke(); 39 } else { 40 if (isDrawHit) { 41 ctx.fillStyle = this.colorKey; 42 } 43 else { 44 ctx.fillStyle = this.lineColor; 45 } 46 if (ctx.canvas.id == "hitCanvas") 47 var radius = this.lineWidth + eraserRadius;//扩大hit上线条的范围，橡皮半径 48 else 49 var radius = this.lineWidth; 50 ctx.arc(this.points.get(0).x, this.points.get(0).y, radius, 0, 2 * Math.PI); 51 ctx.fill(); 52 } 53 View Code
其中绘制到hitCanvas上的时候将lineWidth扩大加上了eraserRadius（圆形橡皮擦半径），下图即为绘制到hitCanvas上的colorKey颜色线条，每个线条颜色值是上图中的key值colorKey。另外线条粗细明显比上面的白色线条要粗很多，因为橡皮擦是个cur鼠标样式它的半径很大，但获取的鼠标点击位置还只是一个像素点坐标，所以为了扩大鼠标点到线条上的范围将其变粗。
2. 线擦除和点擦除 这样线擦除就很容易实现，只需要找到橡皮擦点到画布上的坐标点的色值，就其从hash集合中根据colorKey删除掉该项，即实现了删除整条线。 点擦除就需要考虑到从两端擦除或者从中间擦除的情况： 1 if (that.isErasePoint) { 2 line.points.foreach(function (i, p) { 3 //橡皮擦距离该线条上点的距离是否在橡皮擦半径范围内 4 if (Math.pow(p.x - point.x, 2) + Math.pow(p.y - point.y, 2) = 1 && points2.length() >= 1) {//points1和points2都不为空，说明从中间擦除变为两条线 15 var preLine = editor.commonEditLogic.clonePenLine(line); 16 line.points = points1; 17 var linePen = editor.bdCanvas.elementFactory.createPenLine(point, line.lineWidth, line.lineColor); 18 linePen.points = points2; editor.bdCanvas.activeElement.setPenLine(linePen.colorKey, linePen); 19 } else if (points1.length() == 0 && points2.length() >= 1) {//从一端擦除 20 line.points = points2; 21 } else if (points1.length() >= 1 && points2.length() == 0) {//从一端擦除 22 line.points = points1; 23 } else if (points1.length() == 0 && points2.length() == 0) {//线条上的点全部被擦除，删除该线条 24 editor.bdCanvas.activeElement.delPenLine(line.colorKey);26 } 27 editor.courseware.currentBlackboard.draw(false, true);30 }
|
【本文地址】
今日新闻 |
推荐新闻 |