实现擦除效果的js画布示例代码

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

关于画布的定义：

HTML5的画布元素使用JavaScript在网页上绘制图像。

画布是一个矩形区域，你可以控制它的每个像素。

Canvas有很多方法可以绘制路径、矩形、圆形、字符和添加图像。

Html代码：

div class=' container ' canvas ID=' canvas ' width=' 200 ' height=' 50 '/canvas div class=' content ' hello world/div/div设置一个父容器，其中包括用于遮罩的canvas标签，以及用于在擦除遮罩层后显示内容的内容

Ps:需要增加宽度和高度属性来设置画布元素，这样绘制出来的图形可以按照正常大小显示；否则，宽度和高度在css中设置。虽然画布标签的大小会正常显示，但绘制的图形会按照默认的宽高比放大缩小，默认高度为300px，宽度为150px。

创建上下文对象。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(' mouse down '，eventDown)；canvas . addeventlistener(' mouse up '，eventUp)；canvas . addeventlistener(' mousemove '，eventMove)；这里，首先设置一个变量来指示鼠标是否被按下

var mousedown=false鼠标被按下释放的事件比较简单，主要是设置状态参数

函数event down(e){ e . preventdefault()；mousedown=true}函数event up(e){ e . preventdefault()；mousedown=false}鼠标滑动事件，鼠标滑过，用圆形区域清除图形

设定CTX。global composite operation=' destination-out '优先；

GlobalCompositeOperation属性设置或返回如何将源(新)图像绘制到目标(现有)图像上。

目标输出显示源图像之外的目标图像。只显示目标图像中除源图像以外的部分，源图像是透明的。

该属性用于设置连续绘制图形时两个图形的显示模式。

属性值如下

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

鼠标移动功能

函数event move(e){ e . preventdefault()；if(mouse down){ var x=(e . clientx document . body . scrolleft | | e . pagex)-offsetX | | 0；var y=(e . clienty document . body . scroll top | | e . pagey)-offsecty | | 0；CTX . BeginPath()；ctx.arc(x，y，20，0，数学。PI * 20)；CTX . fill()；}} arc()方法创建弧/曲线(用于创建圆或部分圆)，context.arc (x，y，r，桑乐，角度，计数器时钟方向)；

Ps:要通过圆弧()创建圆，请将起始角度设置为0，结束角度设置为2 * math.pi。

最终效果：

此方法仅用于pc，因为它与鼠标事件绑定。如果要在移动设备上实现，必须绑定触摸事件。

canvas . addeventlistener(' touch start '，event down)；canvas . addeventlistener(' touch end '，eventUp)；canvas . addeventlistener(' touch move '，eventMove)；如果是触摸事件，返回的对象中没有直接的坐标相关信息，需要从changedTouches中检索触摸事件对应的触摸对象。

if(e . changedtouches){ e=e . changedtouches[e . changedtouches . length-1]；}补充更新

这里只实现了使用背景色蒙版的方法，补充了使用图片作为蒙版的方法

var img=new Image()；img . src=' cover . png '；要创建图片对象并设置图片地址，需要drawImage方法将图片绘制到画布元素。具体使用方法请参考HTML5画布drawImage()方法

在这里使用时，需要注意的是，图片加载是异步的，有时会很慢。在后续的绘图操作中，最好在完成后进行图片加载。

img . onload=function(){ CTX . draw image(img，0，0，canvas.width，canvas . height)；CTX . globalcompositeoperation=' destination-out '；//其他操作.}最终效果：