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

一、前言

一直在做PC端的前端开发，从互联网到行业软件。最近发现移动端已经成为前端必备技能了，真是不能停止学习。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完成了第一个小效果了。

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

转载于:https://www.cnblogs.com/season-huang/p/4236566.html

简单入门canvas - 通过刮奖效果来学习相关推荐

入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
移动端原生 js + canvas 实现刮奖效果（适配rem布局）
效果思路使用 canvas 绘制刮奖灰色遮罩部分监听 touchstart.touchmove 和 touchend 事件在事件中处理擦除效果 rem 环境本文的 rem 布局基础为:基于宽 ...
html刮奖特效,用CANVAS模拟一个简单的刮奖效果
用CANVAS模拟一个简单的刮奖效果.html> * { padding: 0; margin: 0; } .box { position: relative; height: 400px; w ...
刮刮奖效果的简单实现
刮刮奖效果的简单实现无意中看到个刮刮奖的效果,觉得很有意思.就想自己也做一个,怎样用html5及javascript实现呢,回忆以前做报表的时候,用过html5 canvas元素.心里就有思路了. ...
html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理原理很简单,就是在刮奖区添加两个canvas, ...
canvas刮奖效果
上次写刮奖效果都一年前了,那时候还是百度找的源码给改的,自己其实也是迷迷糊糊的,这次因为让妹子写,然后想着自己也重新整理下. <!DOCTYPE html> <html> &l ...
html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
HTML5实现刮奖效果
原文:HTML5实现刮奖效果要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
用原生js实现刮奖效果
用原生js实现简单的刮奖效果效果图分析:这是运用canvas来做的,页面结构为一个canvas和一张图片.canvas在最上层,图片在最下层.canvas与图片宽高一致.首先在canvas上填充灰 ...

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

简单入门canvas - 通过刮奖效果来学习相关推荐

最新文章

热门文章