w3c关于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];
}

 

2017.4.23更新

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

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';
  //其他操作...
}

最终实现效果:

 

完整代码:https://github.com/Martian1/erase.js

使用canvas实现擦除效果的更多相关文章

  1. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  2. HTML5 实现橡皮擦的擦除效果

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近项目刚好用到这种效果,也就是有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片.效果图如下:  DEMO请戳右:DEMO ...

  3. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  4. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  5. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  6. canvas/CSS仪表盘效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. canvas弹动效果

    弹动效果,用物体与目标的距离乘上系数再累加至速度上,让物体呈加速度运动,再让速度乘与摩擦力系数,让物体最终停止运动 代码如下所示 var canvas = document.getElementByI ...

  8. 用Canvas制作剪纸效果

    在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...

  9. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

随机推荐

  1. Jemter+Badboy实战经验一(Badboy录制及基础功能)

    1. 使用工具: Apache Jemeter:http://jmeter.apache.org/download_jmeter.cgi (免费官网下载地址) BadBoy:   http://www ...

  2. 数据库 t-sql 语句

    sql 高级语句  在基础语句上加上条件 条件修改: update 表名set 列明=要修改的值  where 列名 =原来的值 条件删除    删除  这个值的的一行 delete from 表名 ...

  3. KoaHub.JS基于Node.js开发的Koa 生成验证码插件代

    ccap node.js generate captcha using c++ library CImg without install any other lib or software node- ...

  4. 基于 Koa平台Node.js开发的KoaHub.js获取/设置会话功能代码

    koa-session2 Middleware for Koa2 to get/set session use with custom stores such as Redis or mongodb ...

  5. Android px、dp、sp之间相互转换 系统默认12 sp

    px  就是像素 sp=dpX字体比例(1.25f) 一.dp(或者dip device independent pixels) 一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp=1px ...

  6. Struts 基本概念,优点及不同版本之间的关系

    strutx 1.x struts 是 apache 基金会的一个开源项目. struts 是一套实现 MVC的框架. MVC = 程序分层设计的思想 = Model(数据访问层1) / View(视 ...

  7. 关于连接数据库的T-SQL语句中的一种小技巧

    (编程生活中,我们经常会用到数据库.然后在通过T-SQL语句来对数据库进行操作的时候,遇到很多麻烦.话说昨天我就被困扰了一天.明明这个T-sql插数据的语句放在数据库运行的时候没有问题,到了java代 ...

  8. Alamofire源码解读系列(九)之响应封装(Response)

    本篇主要带来Alamofire中Response的解读 前言 在每篇文章的前言部分,我都会把我认为的本篇最重要的内容提前讲一下.我更想同大家分享这些顶级框架在设计和编码层次究竟有哪些过人的地方?当然, ...

  9. AE + GDAL实现影像按标准图幅分割(上)

    最近有个项目,其中有个功能是要将遥感影像按标准图幅分割,一开始用AE的接口,慢的让人抓狂,就改用GDAL,速度提升很大.我主要通过http://blog.csdn.net/liminlu0314/学习 ...

  10. php中奖算法逻辑

    最近公司有两个活动, 一个是砸蛋活动, 另一个是转盘活动. 后台这边需要做接口进行对接,当用户在前台点击进行抽奖的时候,发送AJAX请求给后台,后台进行业务处理包括记录用户中奖信息,然后返回json格 ...