js canvas实现擦除效果示例代码_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 00:50:18 点击率：次

关于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 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

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

属性值如下

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

鼠标移动函数

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。

最终效果：

此方法只用于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./201704/yuanma/erase.js-master().rar

总结

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

# canvas擦除效果 # js # canvas # 动画效果 # js擦除效果 # js canvas实现擦除动画 # 能在网页中写字和能擦写的js程序 # 鼠标 # 绑定 # 按下 # 擦除 # 是在 # 加载 # 设置为 # 的是 # 是一个 # 本地下载 # 已有 # 您可以 # 要在 # 相关信息 # 可以使用 # 请把 # 上也 # 这篇文章 # 谢谢大家 # 则在

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：mysql如何备份并迁移到新环境_mysql数据迁移思路

下一篇：根据主机屋建站：怎样设置和优化自己的域名？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：mysql如何备份并迁移到新环境_mysql数据迁移思路

下一篇：根据主机屋建站：怎样设置和优化自己的域名？