canvas 擦除动画_使用canvas实现擦除效果

w3c关于canvas的定义：

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

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

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

html代码:

hello world

设置一个父容器，里面包括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上主要绑定鼠标事件，鼠标按下