欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js canvas实现擦除效果示例代码

程序员文章站 2022-05-30 08:37:53
关于canvas的定义:      html5 的 canvas 元素使用 javascript 在网页上绘制图像。  ...

关于canvas的定义:

     html5 的 canvas 元素使用 javascript 在网页上绘制图像。

     画布是一个矩形区域,您可以控制其每一像素。

     canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

html代码:

<div class="container">

 <canvas id="canvas" width="200" height="50"></canvas>

 <div class="content">hello world</div>

</div> 

设置一个父容器,里面包括canvas标签,用于遮罩,content用于显示擦除遮罩层之后的内容

ps:设置canvas元素需要加上width和height属性,这样绘制的图形才能按照正常尺寸显示,否则在css里面设置宽高,虽然canvas标签的大小会正常显示,绘制的图形则会按照缺省宽高比例放大缩小,缺省的高度是300px,宽度是150px。

创建context对象,getcontext("2d") 对象是内建的 html5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

var canvas = document.getelementbyid(id);

var ctx=canvas.getcontext('2d'); 

绘制一个能覆盖容器的矩形,rect() 方法创建矩形,fill()绘制图像,默认颜色为黑色,可以使用fillstyle属性设置其他颜色

ctx.rect(0,0,canvas.width,canvas.height);

ctx.fill(); 

图像绘制完成,下面是事件绑定,要实现擦除效果,pc上主要绑定鼠标事件,鼠标按下,启动擦除,鼠标松开,关闭擦除

canvas.addeventlistener('mousedown', eventdown);

canvas.addeventlistener('mouseup', eventup);

canvas.addeventlistener('mousemove', eventmove); 

这里先设置一个变量,用以表示,鼠标是否处于按下的状态

var mousedown = false;

鼠标按下松开的事件比较简单,主要是设置状态参数

function eventdown(e){

 e.preventdefault();

 mousedown=true;

}

 

function eventup(e){

 e.preventdefault();

 mousedown=false;

} 

鼠标滑动事件,鼠标滑过的地方,以圆形区域清除图形

首先设置ctx.globalcompositeoperation = 'destination-out';

globalcompositeoperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。

destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。

这个属性是在先后绘制图形情况下,设置两个图形的显示方式。

属性值如下

js canvas实现擦除效果示例代码

具体显示效果,红色矩形是(新)目标图像。蓝色矩形是源(旧)图像:

js canvas实现擦除效果示例代码

鼠标移动函数

function eventmove(e){

 e.preventdefault();

 if(mousedown) {

 var x = (e.clientx + document.body.scrollleft || e.pagex) - offsetx || 0;

 var y = (e.clienty + document.body.scrolltop || e.pagey) - offsety || 0;

 ctx.beginpath();

 ctx.arc(x, y, 20, 0, math.pi * 20);

 ctx.fill();

 }

} 

arc() 方法创建弧/曲线(用于创建圆或部分圆),context.arc(x,y,r,sangle,eangle,counterclockwise);

ps:通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*math.pi。

js canvas实现擦除效果示例代码

最终效果:

js canvas实现擦除效果示例代码

此方法只用于pc端,因为绑定的是鼠标事件,如果要在移动设备上也实现,需要绑定触摸事件

canvas.addeventlistener('touchstart', eventdown);

canvas.addeventlistener('touchend', eventup);

canvas.addeventlistener('touchmove', eventmove); 

如果是触摸事件,返回的对象中没有直接的坐标相关信息,需要在changedtouches中去取到触摸事件对应的 touch 对象。

if(e.changedtouches){

  e=e.changedtouches[e.changedtouches.length-1];

}

补充更新

这里只实现了使用背景色遮罩的方法,补充一下使用图片作为遮罩的方法

var img = new image();

img.src = 'cover.png';

创建一个图片对象,并设置图片地址,绘制图片到canvas元素需要使用到drawimage方法,具体使用方法可以参考: html5 canvas drawimage() 方法

这里使用的时候需要注意,图片加载是异步的,有时会加载的比较慢,在后续的绘制操作过程中,最好是在图片加载完成后再进行

img.onload = function() {

 ctx.drawimage(img, 0, 0,canvas.width, canvas.height);

 ctx.globalcompositeoperation = 'destination-out'; 

  //其他操作...

}

最终实现效果:

js canvas实现擦除效果示例代码

完整代码下载:

github地址: https://github.com/martian1/erase.js

本地下载:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。