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


Posted in HTML / CSS onAugust 12, 2020

清空canvas画布内容

1、重置宽或高

由于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);

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

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 id='p_" + n + "' style='float:left;'>" + 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>

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

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

清除绘制到画布上的线条(点擦除,线擦除)

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

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

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

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

1. 线条存储及绘制

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

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

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

清除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鼠标样式它的半径很大,但获取的鼠标点击位置还只是一个像素点坐标,所以为了扩大鼠标点到线条上的范围将其变粗。

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

 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画布清除内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 #HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 #HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 #HTML / CSS
在html页面中取得session中的值的方法
Aug 11 #HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 #HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 #HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 #HTML / CSS
You might like
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
应届生护士求职信
2013/11/01 职场文书
迟到检讨书1000字
2014/01/15 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
干部选拔任用方案
2014/05/26 职场文书
施工安全标语
2014/06/07 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
员工离职感谢信
2015/01/22 职场文书
暂住证明怎么写
2015/06/19 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
Oracle 多表查询基本语法实例
2022/04/18 Oracle