基于H5canvas刮刮乐界面

效果

老规矩线上效果图, 如下图
这里写图片描述

原理

主要基于canvas的图形组合 context.globalCompositeOperation这个函数.
图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢,还是相互重叠的部分不显示等等,至于怎么显示就取决于type的值了.
type:

source-over(默认值):在原有图形上绘制新图形

destination-over:在原有图形下绘制新图形

source-in:显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色

destination-in:显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色

source-out:只显示新图形非交集部分

destination-out:只显示原有图形非交集部分

source-atop:显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色

destination-atop:显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色

lighter:原有图形和新图形都显示,交集部分做颜色叠加

xor:重叠飞部分不现实

copy:只显示新图形

type值效果图:
这里写图片描述

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>刮刮乐</title>
</head>
<body>
<canvas style="border: 1px solid black; background: url(dog.jpg)" id="myImg"></canvas>
<img src="dog.jpg" style="display: none;">
<script>
var canvas = document.getElementById('myImg');
var Img = document.getElementsByTagName('img')[0];
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext("2d");
context.fillStyle = '#CCC';
context.fillRect(0, 0, 300, 300);
canvas.onmousedown = function() {
canvas.onmousemove = function(e) {
var e = e || window.event;
// e.clientX, e.clientY
context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, false);//获取当前鼠标的横纵坐标作为填充的位置
context.fillStyle = "rgba(0,0,0,1)";
context.fill();
}
}
canvas.onmouseup = function() {
canvas.onmousemove = '';
}
</script>
</body>
</html>
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!