HTML5新增的canvas是什么--通过刮奖效果学习
二、canvas基础
本文的目标是做一个刮奖效果，但是如果都不知道canvas是怎么回事，那么肯定也无法进行下去，所以先讲讲canvas基础吧。
首先，该怎么理解canvas，思来想去，最好的理解办法应该就是把canvas理解为一个空白的画纸，一张你可以在上面画画的纸。
然后，你通过HTML标签定义canvas，例如：
<canvas id="canvas" width="200" height="200">你的浏览器不支持canvas</canvas>
这样，你就设置好了一张200×200的画纸了。
这里要注意的是，canvas元素的宽高需要直接写在标签上或者通过js来设置。如果用css设置，那么浏览器会理解为把这张纸缩放成你设置的宽高。跟预期还是不一样的。
然后，有了纸第二步就是画东西了，画东西需要的就是笔了。得到画笔：
var ctx = document.getElementById("canvas").getContext("2d");
这样，就有了这只笔了，叫ctx。
然后就是绘画，这里要重点说明的是，canvas画东西需要两步
- 第一步：告诉系统你要画的东西的路径
- 第二步：告诉系统你需要用哪种方式填充路径
简单来说，你画一条直线，那么代码应该是告诉系统我要从0,0点到100,100点设置一条路径，然后用黑色描边这条路径。
用代码来描述我上面的那句话：
ctx.beginPath(); // 开始画路径 ctx.moveTo(0, 0); // 移动到0,0点 ctx.lineTo(100, 100); // 画条直线到100,100点 ctx.closePath(); // 闭合路径 ctx.lineWidth = "5"; // 设置线宽5px // 至此路径描述已经结束 ctx.strokeStyle = "#000"; // 设置描边颜色为黑色 ctx.stroke(); // 执行描边
上面代码就可以画一条直线了。当然，canvas能做的远远不止这些。
因为是基础嘛，所以canvas就讲到这里啦。关于canvas的东西太多，但原理基本都是这样，当然除了描边，还有填充（fill），填充各种形状（fillRect），画图形（drawImage）等。系统学习canvas确实需要一本书或者一系列教程，因为我也是刚学，就不误人子弟啦。这些基础其实也够理解下面的例子啦。
三、刮奖效果
最简单的一个刮奖效果原理大概就是这样，放一张底图（或者是文字，例如谢谢惠顾呀），然后再它之上覆盖一个canvas，遮住这张图，接着绑定touchstart（mousedown），touchmove（mousemove），touchend事件。然后移动的时候用“透明”填充canvas，那么被canvas遮住的部分就会呈现出来了。
直接看代码吧，最简单的实现
1 <!DOCTYPE html>
2 <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
3 <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
4 <!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
5 <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
6
7 <head>
8 <meta charset="utf-8">
9 <meta http-equiv="X-UA-Compatible" content="IE=edge">
10 <title>刮奖</title>
11 <meta name="description" content="刮奖">
12 <meta name="viewport" content="width=device-width, initial-scale=1">
13
14 <style>
15 body{margin: 0;}
16 #price{width: 200px; height: 100px; font-size: 40px; color: #f60; line-height: 100px; text-align: center;}
17 #canvas{position: absolute; top: 0; left: 0;}
18 </style>
19 </head>
20
21 <body>
22
23 <div id="price">谢谢惠顾</div>
24 <canvas id="canvas" width="200" height="100">你的浏览器不支持canvas</canvas>
25
26 <script>
27
28 // 得到画笔
29 var cvs = document.getElementById("canvas"),
30 ctx = cvs.getContext("2d"),
31 touchRadius = 5; // 默认手指触摸半径，可以自定义设置
32
33 // 默认填充灰色来遮住文字
34 ctx.fillStyle = "#ccc";
35 ctx.fillRect(0, 0, 200, 100); // fillRect，用矩形填充
36
37 // 画园的方法
38 // @param { integer } 圆心的x坐标
39 // @param { integer } 圆心的y坐标
40 // @param { integer } 圆心半径
41 // @param { string } 填充的颜色（本例中会通过其余代码设置为‘透明’，所以这个设置可以忽略）
42 var fillCircle = function (x, y, radius, fillColor) {
43 this.fillStyle = fillColor || "#eee";
44 this.beginPath();
45 this.moveTo(x, y);
46 this.arc(x, y, radius, 0, Math.PI * 2, false); // 标准画圆
47 this.fill();
48 };
49
50 // 得到涂抹的百分比（此处参考了部分他人代码，出处http://www.cnblogs.com/jscode/p/3580878.html）
51 var getTransparentPercent = function (ctx, width, height) {
52 var imgData = ctx.getImageData(0, 0, width, height), // 得到canvas的像素信息
53 pixles = imgData.data,
54 transPixs = [];
55 for (var i = 0, j = pixles.length; i < j; i += 4) { // 因为存储的结构为[R, G, B, A]，所以要每次跳4个长度
56 var a = pixles[i + 3]; // 拿到存储alpha通道的值
57 if (a === 0) { // alpha通道为0，就代表透明
58 transPixs.push(i);
59 }
60 }
61 return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
62 }
63
64 // 绑定事件（此处参考了部分他人代码，出处http://www.cnblogs.com/jscode/p/3580878.html）
65 // 需要判断是PC还是手机
66 var device = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()),
67 clickEvtName = device ? 'touchstart' : 'mousedown',
68 moveEvtName = device ? 'touchmove' : 'mousemove';
69
70 // 判断是不是开始触摸等
71 if (!device) {
72 var isMouseDown = false;
73 document.addEventListener('mouseup', function (e) {
74 isMouseDown = false;
75 }, false);
76 } else {
77 document.addEventListener("touchmove", function (e) {
78 if (isMouseDown) {
79 e.preventDefault();
80 }
81 }, false);
82 document.addEventListener('touchend', function (e) {
83 isMouseDown = false;
84 }, false);
85 }
86
87 // 开始移动
88 cvs.addEventListener(clickEvtName, function (e) {
89 isMouseDown = true;
90 var x = (device ? e.touches[0].clientX : e.clientX);
91 var y = (device ? e.touches[0].clientY : e.clientY);
92 ctx.globalCompositeOperation = 'destination-out'; // 关键部分，描述当在canvas上再次绘画时候的情况，这个设置便是之前所说的透明
93 fillCircle.call(ctx, x, y, touchRadius);
94 console.log("当前涂抹比例为：" + getTransparentPercent(ctx, 200, 100));
95 }, false);
96
97 // 移动中
98 cvs.addEventListener(moveEvtName, function (e) {
99 if (!device && !isMouseDown) {
100 return false;
101 }
102 var x = (device ? e.touches[0].clientX : e.clientX);
103 var y = (device ? e.touches[0].clientY : e.clientY);
104 ctx.globalCompositeOperation = 'destination-out';
105 fillCircle.call(ctx, x, y, touchRadius);
106 console.log("当前涂抹比例为：" + getTransparentPercent(ctx, 200, 100));
107 }, false);
108 </script>
109 </body>
110
111 </html>
上面的代码完全是按照顺序来写的，所以应该很容易看懂的吧。其中关键的就是设置透明，还有就是设备的判断。
Update：增加了一个判断刮开了多少比例的代码，因为实际需求很可能是刮开多少就告诉用户刮奖结束。这里，因为刮开的部分是“透明的”，在代码中就是说RGBA颜色值中的A是透明的，通过getImageData方法可以得到每个像素点的RGBA值，然后计算一下比例即可。在控制台可以看到刮开的比例数据。
至此，也算是用canva完成了第一个小效果了。
浙公网安备 33010602011771号