入门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完成了第一个小效果了。
来源https://www.cnblogs.com/season-huang/p/4236566.html
入门canvas - 通过刮奖效果来学习相关推荐
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 移动端 原生 js + canvas 实现刮奖效果(适配rem布局)
效果 思路 使用 canvas 绘制刮奖灰色遮罩部分 监听 touchstart.touchmove 和 touchend 事件 在事件中处理擦除效果 rem 环境 本文的 rem 布局基础为:基于宽 ...
- html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...
- canvas刮奖效果
上次写刮奖效果都一年前了,那时候还是百度找的源码给改的,自己其实也是迷迷糊糊的,这次因为让妹子写,然后想着自己也重新整理下. <!DOCTYPE html> <html> &l ...
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
- html刮奖特效,用CANVAS模拟一个简单的刮奖效果
用CANVAS模拟一个简单的刮奖效果.html> * { padding: 0; margin: 0; } .box { position: relative; height: 400px; w ...
- android实现一个橡皮檫效果的自定义View,实现刮奖效果
最近学习自定义View然后做了这么个东西,感觉挺有趣. 简单的就不写了就是一个Activity然后在其中使用,就像TextView一样,只需要设置宽高就行了wrap_content和match_par ...
- HTML5实现刮奖效果
原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
- 刮刮奖效果的简单实现
刮刮奖效果的简单实现 无意中看到个刮刮奖的效果,觉得很有意思.就想自己也做一个,怎样用html5及javascript实现呢,回忆以前 做报表的时候,用过html5 canvas元素.心里就有思路了. ...
最新文章
- php面向对象程序设计,PHP面向对象程序设计类的定义与用法简单示例
- 一文读懂机器学习中的正则化
- 【通信原理】【实验】实验二:数字基带传输实验(GZHU)
- 7-2 作业调度算法--短作业优先 (30 分)(思路+详解+vector容器做法)Come Baby!!!!!!!!!!!
- 惊艳!28岁就任副教授,“最美女教授”年纪轻轻已是博导、院长
- tcp_tw_reuse、tcp_tw_recycle 使用场景及注意事项
- Linux中httpd353错误,linux - 由于控制进程退出并显示错误代码,因此httpd.service的作业失败 - 堆栈内存溢出...
- 用汇编的眼光看C++(之 总结篇)
- JSONObject跟JSONArray来自不同的包会有不同的功能
- DB2 jdbc url 写法
- Spring的基于AspectJ的AOP开发——Spring AOP(五)
- visio 2003密钥
- vijos 1443 月亮之眼
- 易飞ERP--自定义报表之采购价格分析功能表
- 使用python进行普适计算/通用计算
- 大数据就业前景分析-好程序员
- 项目管理专用中英文术语词汇
- Blender中文场景概念原画创作教程
- 通过cluster reshard实现Redis集群缩减节点实战【详细步骤】
- “不为圣贤,便为禽兽。莫问收获,但问耕耘”
热门文章
- MOS管参数解读(热阻、输入输出电容及开关时间)
- 【集成学习】boosting和bagging
- Dlookup函数综合释疑
- STM32F4+ESP8266拟辉光钟设计(一)简介及时间获取
- 向Vue的prototype上绑定或.use()时Cannot read properties of undefined (reading ‘prototype‘)
- c语言编程文件和函数说明模板
- 计算机控制技术在自动驾驶应用分析,计算机视觉在自动驾驶中的应用探讨
- 最全最小系统板原理图设计实操(涉及电容、电阻选型)
- html,css,js学习笔记(第七天)
- goquery简单爬取ebay