使用HTML5 Canvas实现图像擦除效果的技术详解

关于Canvas的基本定义：

Canvas基础与HTML结构搭建

HTML5中的canvas元素允许开发者利用JavaScript在网页中绘制图形。

画布被视为一个矩形区域，开发者可以精确控制其中的每一个像素点。

Canvas提供了丰富的绘图API，支持绘制路径、矩形、圆形、文本以及插入图像等多种功能。

HTML结构搭建：

<div class="container">

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

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

</div> 

构建一个父级容器，内部包含canvas标签用于实现遮罩效果，同时设置content区域以展示擦除遮罩层后显露的内容。

注意：在设置canvas元素时，必须显式添加width和height属性，以确保绘制的图形按正常比例显示。若仅在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('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时，仅在源图像外部显示目标图像。此时源图像区域变为透明，从而显示出被擦除的效果。

该属性决定了在先后绘制多个图形时，它们之间的显示组合方式。

该属性的可选值如下：

具体显示效果中，红色矩形代表（新）目标图像，蓝色矩形代表源（旧）图像。

鼠标移动处理函数：

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);进行具体绘制。

注意：通过arc()创建圆形时，需将起始角设为0，结束角设为2*Math.PI，以形成完整的圆。

最终运行效果如下：

移动端触摸事件适配

该方法仅适用于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'; 

　 //其他操作...

}

最终实现效果展示：

完整代码下载链接：

GitHub仓库地址：https://github.com/Martian1/erase.js

本地下载链接：http://xiazai.jb51.net/201704/yuanma/erase.js-master(jb51.net).rar

总结：

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