简单入门canvas - 经过刮奖效果来学习

时间 2019-11-11

标签简单入门 canvas 经过效果学习繁體版

原文原文链接

一、前言css

一直在作PC端的前端开发，从互联网到行业软件。最近发现移动端已经成为前端必备技能了，真是不能中止学习。HTML5新增的一些东西，canvas是用的比较多也比较复杂的一个，简单的入门了一下，经过一个刮奖效果来学习。html

2、canvas基础前端

本文的目标是作一个刮奖效果，可是若是都不知道canvas是怎么回事，那么确定也没法进行下去，因此先讲讲canvas基础吧。android

首先，该怎么理解canvas，思来想去，最好的理解办法应该就是把canvas理解为一个空白的画纸，一张你能够在上面画画的纸。web

而后，你经过HTML标签订义canvas，例如：canvas

<canvas id="canvas" width="200" height="200">你的浏览器不支持canvas</canvas>

这样，你就设置好了一张200×200的画纸了。浏览器

这里要注意的是，canvas元素的宽高须要直接写在标签上或者经过js来设置。若是用css设置，那么浏览器会理解为把这张纸缩放成你设置的宽高。跟预期仍是不同的。iphone

而后，有了纸第二步就是画东西了，画东西须要的就是笔了。获得画笔：学习

var ctx = document.getElementById("canvas").getContext("2d");

这样，就有了这只笔了，叫ctx。ui

而后就是绘画，这里要重点说明的是，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确实须要一本书或者一系列教程，由于我也是刚学，就不误人子弟啦。这些基础其实也够理解下面的例子啦。

3、刮奖效果

最简单的一个刮奖效果原理大概就是这样，放一张底图（或者是文字，例如谢谢惠顾呀），而后再它之上覆盖一个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完成了第一个小效果了。

转载本站文章请注明做者和出处奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，请勿用于任何商业用途

1. Canvas实现简单刮刮乐效果
2. canvas实现刮刮奖效果
3. 刮奖效果
4. HTML5 Canvas实战之刮奖效果
5. canvas实现刮开抽奖效果
6. 基于canvas的刮刮奖
7. cocos2d实现刮奖效果
8. 用原生js实现刮奖效果
9. 刮刮卡效果实现
10. 刮刮乐效果
更多相关文章...
• SVG 模糊效果 - SVG 教程
• 您已经学习了 XQuery，接下来该学习什么内容呢？ - XQuery 教程
• YAML 入门教程
• Tomcat学习笔记（史上最全tomcat学习笔记）