HTML部分
通过canvas实现刮刮乐上面的图层。
<div class="container">
<div class="charactor cover">12345</div>
<div class="cover">
<canvas id="canvas"></canvas>
</div>
</div>
样式设置
将内容.charactor
和涂层.cover[1]
设置为相同的定位。
.container {
width: 200px;
height: 100px;
position: relative;
}
.charactor {
font-size: 50px;
color: red;
text-align: center;
line-height: 100px;
}
.cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
实现刮刮乐效果
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.fillRect(0,0,200,100);
context.fillStyle = 'gray';
context.closePath();
//上面实现涂层覆盖内容部分,效果如下:
//下面在鼠标按下后移动鼠标才可将涂层擦除,鼠标松开后移动鼠标不会擦除涂层。
canvas.addEventListener('mousedown',function () {
canvas.addEventListener('mousemove',getMove);
});
function getMove() {
var e = arguments[0];
var x = e.offsetX;
var y = e.offsetY;
//offsetX表示鼠标相对于当前元素的偏移量
//下面以当前按下鼠标移动的点为圆心画圆
context.beginPath();
context.arc(x,y,10,0,2*Math.PI);
context.fill();
//下面是显示画布上当前画到的圆之外的部分
context.globalCompositeOperation = 'destination-out';
context.closePath();
}
canvas.addEventListener('mouseup',function () {
canvas.removeEventListener('mousemove',getMove);
});
详解canvas
的globalCompositionOperation
属性
将原本在画布上的图像记为目标图像destination
,将要涂在画布上的图像记为原图像source
。
source-over
表示原图像会覆盖目标图像。source-atop
表示目标图像会全部显示,原图像只显示其和目标图像相交的部分,原图像在上source-in
表示目标图像透明,原图像只显示其和目标图像相交的部分source-out
表示目标图像透明,原图像只显示其和目标图像相交以外部分destination-over
表示目标图像会覆盖原图像。destination-atop
表示原图像会全部显示,目标图像只显示其和原图像相交的部分,目标图像在上destination-in
表示原图像透明,目标图像只显示其和原图像相交的部分destination-out
表示原图像透明,目标图像只显示其和原图像相交以外部分,如上面的刮刮乐,即鼠标滑过的地方显示透明,其余地方颜色不变。lighter
表示原图像和目标图像重叠copy
只显示原图像,忽略目标图像xor
不显示相交的部分