这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩!

demo一:刮刮乐

  舍不得买2块钱的刮刮乐,就只能写个类似的功能过过彩票瘾了!

布局

  1. <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
  2. <div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
  3. <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
  4. <span></span>
  5. <span></span>
  6. <span></span>
  7. <span></span>
  8. </div>
  9. <div id="canvasArea" style="width:300px;height:200px;position:relative;">
  10. <div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等奖</div>
  11. <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
  12. </div>
  13. </div>

这段html要注意的地方有2个:

  1. flex布局,将‘祝君中奖’垂直居中,目前还有兼容问题,不过看我们大前端的发展趋势,应该很快就能搞定了;
  2. canvas和‘一等奖’div的z-index问题,将canvas的z-index设置较高,使其置于一等奖div上面。

设置canvas画布

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

绘制刮奖区域

  1. context.fillStyle='#A9AB9D';
  2. context.fillRect(10,10,280,180);
  3. context.fillStyle='#000';
  4. context.font='50px Arial';
  5. context.fillText('刮奖区',75,115);
  1. 填充颜色;
  2. 绘制实心矩形;
  3. 设置字体颜色;
  4. 设置字体大小类型;
  5. 绘制实心字体。

以上都是canvas基础api,看w3c就ok了。

为了好看,我将‘祝君中奖’加个字体变色

  1. setInterval(function(){
  2. document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff';
  3. },500);

刮奖功能函数

  1. var brush=function(){//刮奖
  2. context.clearRect(event.offsetX,event.offsetY,20,20);
  3. };

为canvas元素onmousedown和onmouseup事件

  1. canvas.onmousedown = function(){
  2. // 鼠标按下时 - 绑定鼠标跟随事件
  3. bindHandler(canvas,'mousemove',brush,false);
  4. }
  5. canvas.onmouseup = function(){
  6. // 停止刮奖功能 - 解绑鼠标跟随事件
  7. removeHandler(canvas,"mousemove",brush,false);
  8. }

这里的事件绑定与解绑我上篇博文有封装,最后完整代码也有!

刮刮乐happy到底结束!最后附上完整代码,再看看效果吧!

demo二:画笔

布局

  1. <div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
  2. <canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
  3. </div>

设置canvas画布

  1. var canvas2 = document.getElementById("canvas2");
  2. var context2 = canvas2.getContext("2d");

画笔功能函数

  1. var draw=function(){
  2. context2.fillRect(event.offsetX,event.offsetY,10,10);
  3. };

为canvas元素onmousedown和onmouseup事件

  1. context2.font='20px Arial';
  2. context2.strokeText('NICK画笔',100,30);//写个头
  3. //1. 为canvas元素onmousedown和onmouseup事件
  4. canvas2.onmousedown = function(){
  5. // 启用画笔功能 - 绑定鼠标跟随事件
  6. bindHandler(canvas2,'mousemove',draw,false);
  7. }
  8. canvas2.onmouseup = function(){
  9. // 停止画笔功能 - 解绑鼠标跟随事件
  10. removeHandler(canvas2,"mousemove",draw,false);
  11. }

画图工具的画笔功能到底结束!

多谢各位老司机的鞭策与提醒,说画笔功能有不连续的现象!

现已改良,并兼容了移动端!

  1. //改良后的写法
  2. var isTouch = "ontouchstart" in window ? true : false;
  3. var StartDraw = isTouch ? "touchstart" : "mousedown",
  4. MoveDraw = isTouch ? "touchmove" : "mousemove",
  5. EndDraw = isTouch ? "touchend" : "mouseup";
  6.  
  7. context2.strokeStyle='blue';//线色
  8. context2.lineCap = "round";//连接处为圆形
  9. context2.lineWidth =10;//线框
  10.  
  11. canvas2.addEventListener(StartDraw, function(ev){
  12. ev.preventDefault();
  13. var isX = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
  14. var isY = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
  15. var x = isX - canvas2.offsetLeft;
  16. var y = isY - canvas2.offsetTop;
  17. context2.beginPath();
  18. context2.moveTo(x, y);
  19. function StartMove(ev){
  20. var isX1 = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
  21. var isY1 = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
  22. var x1 = isX1 - canvas2.offsetLeft;
  23. var y1 = isY1 - canvas2.offsetTop;
  24. context2.lineTo(x1, y1);
  25.  
  26. context2.stroke();
  27. context2.beginPath();
  28. context2.moveTo(x1, y1);
  29. };
  30. function EndMove(ev){
  31. var isX1 = isTouch ? ev.changedTouches[0].pageX : ev.pageX;
  32. var isY1 = isTouch ? ev.changedTouches[0].pageY : ev.pageY;
  33. var x1 = isX1 - canvas2.offsetLeft;
  34. var y1 = isY1 - canvas2.offsetTop;
  35. context2.lineTo(x1, y1);
  36. context2.stroke();
  37. canvas2.removeEventListener(MoveDraw, StartMove, false);
  38. canvas2.removeEventListener(EndDraw, EndMove, false);
  39. };
  40. canvas2.addEventListener(MoveDraw, StartMove, false);
  41. canvas2.addEventListener(EndDraw, EndMove, false);
  42. }, false);

附上完整代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Canvas lottery brush nick</title>
  5. <meta charset="utf-8"/>
  6. </head>
  7. <body>
  8. <div style="width:640px;margin:auto;">
  9. <!--刮刮乐-->
  10. <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
  11. <div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
  12. <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
  13. <span></span>
  14. <span></span>
  15. <span></span>
  16. <span></span>
  17. </div>
  18. <div id="canvasArea" style="width:300px;height:200px;position:relative;">
  19. <div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等奖</div>
  20. <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
  21. </div>
  22. </div>
  23.  
  24. <!--画图工具画笔功能-->
  25. <div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
  26. <canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
  27. </div>
  28. </div>
  29.  
  30. <div style="text-align:center;">
  31. <p>刮刮乐:鼠标按住不放,拖动开始刮奖!</p>
  32. <p>画笔:鼠标按住不放,拖动画画!</p>
  33. </div>
  34. <script>
  35. //插件方法封装区
  36.  
  37. ;(function(){
  38. // 事件绑定
  39. window.bindHandler = (function() {
  40. if (window.addEventListener) {// 标准浏览器
  41. return function(elem, type, handler) {
  42. // elem:节点 type:事件类型 handler:事件处理函数
  43. // 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意:ie没有这个参数
  44. elem.addEventListener(type, handler, false);
  45. }
  46. } else if (window.attachEvent) {// IE浏览器
  47. return function(elem, type, handler) {
  48. elem.attachEvent("on" + type, handler);
  49. }
  50. }
  51. }());
  52.  
  53. // 事件解除
  54. window.removeHandler = (function() {
  55. if (window.removeEventListener) {// 标准浏览器
  56. return function(elem, type, handler) {
  57. elem.removeEventListener(type, handler, false);
  58. }
  59. } else if (window.detachEvent) {// IE浏览器
  60. return function(elem, type, handler) {
  61. elem.detachEvent("on" + type, handler);
  62. }
  63. }
  64. }());
  65. }());
  66.  
  67. //命名区
  68.  
  69. var canvas = document.getElementById("canvas");
  70. var context = canvas.getContext("2d");
  71.  
  72. var canvas2 = document.getElementById("canvas2");
  73. var context2 = canvas2.getContext("2d");
  74. var brush=function(){//刮奖
  75. context.clearRect(event.offsetX,event.offsetY,20,20);
  76. };
  77. var draw=function(){//写字
  78. context2.fillRect(event.offsetX,event.offsetY,10,10);
  79. };
  80.  
  81. //功能实现区
  82.  
  83. //刮刮乐
  84.  
  85. // 1. 绘制刮奖区域
  86. context.fillStyle='#A9AB9D';
  87. context.fillRect(10,10,280,180);
  88. context.fillStyle='#000';
  89. context.font='50px Arial';
  90. context.fillText('刮奖区',75,115);
  91. //字体变色
  92. setInterval(function(){
  93. document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff';
  94. },500);
  95. //2. 为canvas元素onmousedown和onmouseup事件
  96. canvas.onmousedown = function(){
  97. // 鼠标按下时 - 绑定鼠标跟随事件
  98. bindHandler(canvas,'mousemove',brush,false);
  99. }
  100. canvas.onmouseup = function(){
  101. // 停止刮奖功能 - 解绑鼠标跟随事件
  102. removeHandler(canvas,"mousemove",brush,false);
  103. }
  104.  
  105. //画笔
  106. context2.font='20px Arial';
  107. context2.strokeText('NICK画笔',100,30);//写个头
  108. //为canvas元素onmousedown和onmouseup事件
  109. /*
  110. //这是原来的写法
  111. canvas2.onmousedown = function(){
  112. // 启用画笔功能 - 绑定鼠标跟随事件
  113. bindHandler(canvas2,'mousemove',draw,false);
  114. }
  115. canvas2.onmouseup = function(){
  116. // 停止画笔功能 - 解绑鼠标跟随事件
  117. removeHandler(canvas2,"mousemove",draw,false);
  118. }
  119. */
  120. //改良后的写法
  121. var isTouch = "ontouchstart" in window ? true : false;
  122. var StartDraw = isTouch ? "touchstart" : "mousedown",
  123. MoveDraw = isTouch ? "touchmove" : "mousemove",
  124. EndDraw = isTouch ? "touchend" : "mouseup";
  125.  
  126. context2.strokeStyle='blue';//线色
  127. context2.lineCap = "round";//连接处为圆形
  128. context2.lineWidth =10;//线框
  129.  
  130. canvas2.addEventListener(StartDraw, function(ev){
  131. ev.preventDefault();
  132. var isX = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
  133. var isY = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
  134. var x = isX - canvas2.offsetLeft;
  135. var y = isY - canvas2.offsetTop;
  136. context2.beginPath();
  137. context2.moveTo(x, y);
  138. function StartMove(ev){
  139. var isX1 = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
  140. var isY1 = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
  141. var x1 = isX1 - canvas2.offsetLeft;
  142. var y1 = isY1 - canvas2.offsetTop;
  143. context2.lineTo(x1, y1);
  144.  
  145. context2.stroke();
  146. context2.beginPath();
  147. context2.moveTo(x1, y1);
  148. };
  149. function EndMove(ev){
  150. var isX1 = isTouch ? ev.changedTouches[0].pageX : ev.pageX;
  151. var isY1 = isTouch ? ev.changedTouches[0].pageY : ev.pageY;
  152. var x1 = isX1 - canvas2.offsetLeft;
  153. var y1 = isY1 - canvas2.offsetTop;
  154. context2.lineTo(x1, y1);
  155. context2.stroke();
  156. canvas2.removeEventListener(MoveDraw, StartMove, false);
  157. canvas2.removeEventListener(EndDraw, EndMove, false);
  158. };
  159. canvas2.addEventListener(MoveDraw, StartMove, false);
  160. canvas2.addEventListener(EndDraw, EndMove, false);
  161. }, false);
  162. </script>
  163. </body>
  164. </html>

  代码写完了,我也想说点其他的:

  上面js代码中,有不少注释,我将其分为几个区域:插件方法封装区、命名区、功能实现区、刮刮乐区以及画笔区等,我感觉这样写加上一些注释,能使代码能加简洁,便于以后的维护!当然这只是个人观点,欢迎各位点击我博客右边公告栏的qq交流交流!

最后附上:

上篇博文:事件绑定与解绑!(只是一个简单的封装)

来看看效果,玩玩吧!

canvas刮刮乐和画笔的更多相关文章

  1. canvas刮刮乐

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  2. HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  3. 游戏的套路你知道吗? H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  4. H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  5. 【Android界面实现】使用Canvas对象实现“刮刮乐”效果

    在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...

  6. canvas 实现刮刮乐

    在解决问题前,我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js 能够调用它来进行绘图. ...

  7. canvas刮刮乐游戏等

    裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...

  8. canvas 写一个刮刮乐抽奖

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. canvas 绘制刮刮卡

    思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...

随机推荐

  1. initWithCoder与initWithFrame的区别

    1. initWithFrame方法是什么?   initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对象,也有initWithFrame方 ...

  2. 数据库之SQL编程

    定义局部变量 declare @num int 途径一: 途径二: set 和select赋值方式的区别 唯一区别,如果从数据库表中获取数据,只能用 select ) select @name =st ...

  3. Underscore-分析

    0.Ecmascript的版本重要时间点 Ecmascript262-3 1999年,ie5.5及以后完全支持,ff,chrome等全部支持Ecmascript262-4 因为跨越太大,废弃Ecmas ...

  4. HDFS 架构解析

    本文以 Hadoop 提供的分布式文件系统(HDFS)为例来进一步展开解析分布式存储服务架构设计的要点. 架构目标 任何一种软件框架或服务都是为了解决特定问题而产生的.还记得我们在 <分布式存储 ...

  5. 解读ASP.NET 5 & MVC6系列(1):ASP.NET 5简介

    ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一 ...

  6. Android应用安全开发之浅谈加密算法的坑

      <Android应用安全开发之浅谈加密算法的坑> 作者:阿里移动安全@伊樵,@舟海 阿里聚安全,一站式解决应用开发安全问题     Android开发中,难免会遇到需要加解密一些数据内 ...

  7. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  8. .Net开发笔记(二十一) 反射在.net中的应用

    反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...

  9. ASP.NET MVC学前篇之请求流程

    ASP.NET MVC学前篇之请求流程 请求流程描述 对于请求的流程,文章的重点是讲HttpApplication和HttpModule之间的关系,以及一个简单的示例实现.(HttpModule又是M ...

  10. SharpFileDB - a file database for small apps

    SharpFileDB - a file database for small apps 本文中文版在此处. I'm not an expert of database. Please feel fr ...