关于canvas的定义:
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML代码:
<div class="content">hello world
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<div class="content">hello world
设置一个父容器,里面包括canvas标签,用于遮罩,content用于显示擦除遮罩层之后的内容
ps:设置canvas元素需要加上width和height属性,这样绘制的图形才能按照正常尺寸显示,否则在css里面设置宽高,虽然canvas标签的大小会正常显示,绘制的图形则会按照缺省宽高比例放大缩小,缺省的高度是300px,宽度是150px。
创建context对象,getContext("2d")
对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
绘制一个能覆盖容器的矩形,rect() 方法创建矩形,fill()
绘制图像,默认颜色为黑色,可以使用fillStyle属性设置其他颜色
图像绘制完成,下面是事件绑定,要实现擦除效果,pc上主要绑定鼠标事件,鼠标按下,启动擦除,鼠标松开,关闭擦除
canvas.addEventListener('mousemove',eventMove); @H_502_17@
这里先设置一个变量,用以表示,鼠标是否处于按下的状态
鼠标按下松开的事件比较简单,主要是设置状态参数
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
} @H_502_17@
鼠标滑动事件,鼠标滑过的地方,以圆形区域清除图形
首先设置ctx.globalCompositeOperation = 'destination-out';
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。
具体显示效果,红色矩形是(新)目标图像。蓝色矩形是源(旧)图像:
鼠标移动函数
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,Math.PI * 20);
ctx.fill();
}
} @H_502_17@
arc()
方法创建弧/曲线(用于创建圆或部分圆),context.arc(x,r,sAngle,eAngle,counterclockwise);
ps:通过 arc()
来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
最终效果:
此方法只用于pc端,因为绑定的是鼠标事件,如果要在移动设备上也实现,需要绑定触摸事件
canvas.addEventListener('touchmove',eventMove); @H_502_17@
如果是触摸事件,返回的对象中没有直接的坐标相关信息,需要在changedTouches中去取到触摸事件对应的 Touch 对象。
}@H_502_17@
这里只实现了使用背景色遮罩的方法,补充一下使用图片作为遮罩的方法
创建一个图片对象,并设置图片地址,绘制图片到canvas元素需要使用到drawImage方法,具体使用方法可以参考:
这里使用的时候需要注意,图片加载是异步的,有时会加载的比较慢,在后续的绘制操作过程中,最好是在图片加载完成后再进行
ctx.globalCompositeOperation = 'destination-out';
//其他操作...
}
最终实现效果:
完整代码下载:
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。