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

var count = this.points.length(); var p: Core.Point = this.points.get(0); if (isDrawHit) { ctx.strokeStyle = this.colorKey; } else { ctx.strokeStyle = this.lineColor; } ctx.lineCap = "round"; ctx.lineJoin = 'round';//转折的时候不出现尖角 if (ctx.canvas.id == "hitCanvas") ctx.lineWidth = this.lineWidth + eraserRadius;//扩大hit上线条的范围，橡皮半径 else ctx.lineWidth = this.lineWidth; ctx.beginPath(); if (count >= 2) { ctx.moveTo(p.x, p.y); for (var i = 1; i < count - 2; i++) { // p = this.points.get(i); // ctx.lineTo(p.x, p.y); if (this.points.get(i).x == this.points.get(i + 1).x && this.points.get(i).y == this.points.get(i + 1).y) continue; var c = (this.points.get(i).x + this.points.get(i + 1).x) / 2; var d = (this.points.get(i).y + this.points.get(i + 1).y) / 2; ctx.quadraticCurveTo(this.points.get(i).x, this.points.get(i).y, c, d); //二次贝塞曲线函数 } // For the last 2 points if (count >= 3) { ctx.quadraticCurveTo( this.points.get(i).x, this.points.get(i).y, this.points.get(i + 1).x, this.points.get(i + 1).y ); } else if (count >= 2) { ctx.lineTo(this.points.get(1).x, this.points.get(1).y); } ctx.stroke(); } else { if (isDrawHit) { ctx.fillStyle = this.colorKey; } else { ctx.fillStyle = this.lineColor; } if (ctx.canvas.id == "hitCanvas") var radius = this.lineWidth + eraserRadius;//扩大hit上线条的范围，橡皮半径 else var radius = this.lineWidth; ctx.arc(this.points.get(0).x, this.points.get(0).y, radius, 0, 2 * Math.PI); ctx.fill(); }

其中绘制到hitCanvas上的时候将lineWidth扩大加上了eraserRadius（圆形橡皮擦半径），下图即为绘制到hitCanvas上的colorKey颜色线条，每个线条颜色值是上图中的key值colorKey。另外线条粗细明显比上面的白色线条要粗很多，因为橡皮擦是个cur鼠标样式它的半径很大，但获取的鼠标点击位置还只是一个像素点坐标，所以为了扩大鼠标点到线条上的范围将其变粗。

 2. 线擦除和点擦除

这样线擦除就很容易实现，只需要找到橡皮擦点到画布上的坐标点的色值，就其从hash集合中根据colorKey删除掉该项，即实现了删除整条线。

点擦除就需要考虑到从两端擦除或者从中间擦除的情况：

if (that.isErasePoint) { line.points.foreach(function (i, p) { //橡皮擦距离该线条上点的距离是否在橡皮擦半径范围内 if (Math.pow(p.x - point.x, 2) + Math.pow(p.y - point.y, 2) <= Math.pow(eraserRadius, 2)) { isSeparate = true; //已经找到橡皮擦半径范围内的点，该点不存入两个集合中的任何一个 } else { if (isSeparate) //找到后将之后的点存入另一个点集合points中 points2.add(p); else//找到之前将点存入点集合points1中 points.add(p); } }) //遍历完线条points上的所有点后。根据points1和points2是否为空处理点擦除后的线条 if (points1.length() >= 1 && points2.length() >= 1) { //points1和points2都不为空，说明从中间擦除变为两条线 var preLine = editor.commonEditLogic.clonePenLine(line); line.points = points1; var linePen = editor.bdCanvas.elementFactory.createPenLine(point, line.lineWidth, line.lineColor); linePen.points = points2; editor.bdCanvas.activeElement.setPenLine(linePen.colorKey, linePen); } else if (points1.length() == 0 && points2.length() >= 1) { //从一端擦除 line.points = points2; } else if (points1.length() >= 1 && points2.length() == 0) { //从一端擦除 line.points = points1; } else if (points1.length() == 0 && points2.length() == 0) { //线条上的点全部被擦除，删除该线条 editor.bdCanvas.activeElement.delPenLine(line.colorKey); } editor.courseware.currentBlackboard.draw(false, true); }

到此这篇关于清除canvas画布内容(点擦除+线擦除)的文章就介绍到这了,更多相关canvas画布清除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!