清除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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python实现八大排序算法(1)
2017/09/14 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
python 实现aes256加密
2020/11/27 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
综合内勤岗位职责
2014/04/14 职场文书
2015入党自荐书范文
2015/03/05 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python