canvas刮刮乐和画笔
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩!
demo一:刮刮乐
舍不得买2块钱的刮刮乐,就只能写个类似的功能过过彩票瘾了!
布局
- <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
- <div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
- <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
- <span>祝</span>
- <span>君</span>
- <span>中</span>
- <span>奖</span>
- </div>
- <div id="canvasArea" style="width:300px;height:200px;position:relative;">
- <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>
- <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
- </div>
- </div>
这段html要注意的地方有2个:
- flex布局,将‘祝君中奖’垂直居中,目前还有兼容问题,不过看我们大前端的发展趋势,应该很快就能搞定了;
- canvas和‘一等奖’div的z-index问题,将canvas的z-index设置较高,使其置于一等奖div上面。
设置canvas画布
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
绘制刮奖区域
- context.fillStyle='#A9AB9D';
- context.fillRect(10,10,280,180);
- context.fillStyle='#000';
- context.font='50px Arial';
- context.fillText('刮奖区',75,115);
- 填充颜色;
- 绘制实心矩形;
- 设置字体颜色;
- 设置字体大小类型;
- 绘制实心字体。
以上都是canvas基础api,看w3c就ok了。
为了好看,我将‘祝君中奖’加个字体变色
- setInterval(function(){
- document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff';
- },500);
刮奖功能函数
- var brush=function(){//刮奖
- context.clearRect(event.offsetX,event.offsetY,20,20);
- };
为canvas元素onmousedown和onmouseup事件
- canvas.onmousedown = function(){
- // 鼠标按下时 - 绑定鼠标跟随事件
- bindHandler(canvas,'mousemove',brush,false);
- }
- canvas.onmouseup = function(){
- // 停止刮奖功能 - 解绑鼠标跟随事件
- removeHandler(canvas,"mousemove",brush,false);
- }
这里的事件绑定与解绑我上篇博文有封装,最后完整代码也有!
刮刮乐happy到底结束!最后附上完整代码,再看看效果吧!
demo二:画笔
布局
- <div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
- <canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
- </div>
设置canvas画布
- var canvas2 = document.getElementById("canvas2");
- var context2 = canvas2.getContext("2d");
画笔功能函数
- var draw=function(){
- context2.fillRect(event.offsetX,event.offsetY,10,10);
- };
为canvas元素onmousedown和onmouseup事件
- context2.font='20px Arial';
- context2.strokeText('NICK画笔',100,30);//写个头
- //1. 为canvas元素onmousedown和onmouseup事件
- canvas2.onmousedown = function(){
- // 启用画笔功能 - 绑定鼠标跟随事件
- bindHandler(canvas2,'mousemove',draw,false);
- }
- canvas2.onmouseup = function(){
- // 停止画笔功能 - 解绑鼠标跟随事件
- removeHandler(canvas2,"mousemove",draw,false);
- }
画图工具的画笔功能到底结束!
多谢各位老司机的鞭策与提醒,说画笔功能有不连续的现象!
现已改良,并兼容了移动端!
- //改良后的写法
- var isTouch = "ontouchstart" in window ? true : false;
- var StartDraw = isTouch ? "touchstart" : "mousedown",
- MoveDraw = isTouch ? "touchmove" : "mousemove",
- EndDraw = isTouch ? "touchend" : "mouseup";
- context2.strokeStyle='blue';//线色
- context2.lineCap = "round";//连接处为圆形
- context2.lineWidth =10;//线框
- canvas2.addEventListener(StartDraw, function(ev){
- ev.preventDefault();
- var isX = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
- var isY = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
- var x = isX - canvas2.offsetLeft;
- var y = isY - canvas2.offsetTop;
- context2.beginPath();
- context2.moveTo(x, y);
- function StartMove(ev){
- var isX1 = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
- var isY1 = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
- var x1 = isX1 - canvas2.offsetLeft;
- var y1 = isY1 - canvas2.offsetTop;
- context2.lineTo(x1, y1);
- context2.stroke();
- context2.beginPath();
- context2.moveTo(x1, y1);
- };
- function EndMove(ev){
- var isX1 = isTouch ? ev.changedTouches[0].pageX : ev.pageX;
- var isY1 = isTouch ? ev.changedTouches[0].pageY : ev.pageY;
- var x1 = isX1 - canvas2.offsetLeft;
- var y1 = isY1 - canvas2.offsetTop;
- context2.lineTo(x1, y1);
- context2.stroke();
- canvas2.removeEventListener(MoveDraw, StartMove, false);
- canvas2.removeEventListener(EndDraw, EndMove, false);
- };
- canvas2.addEventListener(MoveDraw, StartMove, false);
- canvas2.addEventListener(EndDraw, EndMove, false);
- }, false);
附上完整代码:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Canvas lottery brush nick</title>
- <meta charset="utf-8"/>
- </head>
- <body>
- <div style="width:640px;margin:auto;">
- <!--刮刮乐-->
- <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
- <div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
- <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
- <span>祝</span>
- <span>君</span>
- <span>中</span>
- <span>奖</span>
- </div>
- <div id="canvasArea" style="width:300px;height:200px;position:relative;">
- <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>
- <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
- </div>
- </div>
- <!--画图工具画笔功能-->
- <div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
- <canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
- </div>
- </div>
- <div style="text-align:center;">
- <p>刮刮乐:鼠标按住不放,拖动开始刮奖!</p>
- <p>画笔:鼠标按住不放,拖动画画!</p>
- </div>
- <script>
- //插件方法封装区
- ;(function(){
- // 事件绑定
- window.bindHandler = (function() {
- if (window.addEventListener) {// 标准浏览器
- return function(elem, type, handler) {
- // elem:节点 type:事件类型 handler:事件处理函数
- // 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意:ie没有这个参数
- elem.addEventListener(type, handler, false);
- }
- } else if (window.attachEvent) {// IE浏览器
- return function(elem, type, handler) {
- elem.attachEvent("on" + type, handler);
- }
- }
- }());
- // 事件解除
- window.removeHandler = (function() {
- if (window.removeEventListener) {// 标准浏览器
- return function(elem, type, handler) {
- elem.removeEventListener(type, handler, false);
- }
- } else if (window.detachEvent) {// IE浏览器
- return function(elem, type, handler) {
- elem.detachEvent("on" + type, handler);
- }
- }
- }());
- }());
- //命名区
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- var canvas2 = document.getElementById("canvas2");
- var context2 = canvas2.getContext("2d");
- var brush=function(){//刮奖
- context.clearRect(event.offsetX,event.offsetY,20,20);
- };
- var draw=function(){//写字
- context2.fillRect(event.offsetX,event.offsetY,10,10);
- };
- //功能实现区
- //刮刮乐
- // 1. 绘制刮奖区域
- context.fillStyle='#A9AB9D';
- context.fillRect(10,10,280,180);
- context.fillStyle='#000';
- context.font='50px Arial';
- context.fillText('刮奖区',75,115);
- //字体变色
- setInterval(function(){
- document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff';
- },500);
- //2. 为canvas元素onmousedown和onmouseup事件
- canvas.onmousedown = function(){
- // 鼠标按下时 - 绑定鼠标跟随事件
- bindHandler(canvas,'mousemove',brush,false);
- }
- canvas.onmouseup = function(){
- // 停止刮奖功能 - 解绑鼠标跟随事件
- removeHandler(canvas,"mousemove",brush,false);
- }
- //画笔
- context2.font='20px Arial';
- context2.strokeText('NICK画笔',100,30);//写个头
- //为canvas元素onmousedown和onmouseup事件
- /*
- //这是原来的写法
- canvas2.onmousedown = function(){
- // 启用画笔功能 - 绑定鼠标跟随事件
- bindHandler(canvas2,'mousemove',draw,false);
- }
- canvas2.onmouseup = function(){
- // 停止画笔功能 - 解绑鼠标跟随事件
- removeHandler(canvas2,"mousemove",draw,false);
- }
- */
- //改良后的写法
- var isTouch = "ontouchstart" in window ? true : false;
- var StartDraw = isTouch ? "touchstart" : "mousedown",
- MoveDraw = isTouch ? "touchmove" : "mousemove",
- EndDraw = isTouch ? "touchend" : "mouseup";
- context2.strokeStyle='blue';//线色
- context2.lineCap = "round";//连接处为圆形
- context2.lineWidth =10;//线框
- canvas2.addEventListener(StartDraw, function(ev){
- ev.preventDefault();
- var isX = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
- var isY = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
- var x = isX - canvas2.offsetLeft;
- var y = isY - canvas2.offsetTop;
- context2.beginPath();
- context2.moveTo(x, y);
- function StartMove(ev){
- var isX1 = isTouch ? ev.targetTouches[0].pageX : ev.pageX;
- var isY1 = isTouch ? ev.targetTouches[0].pageY : ev.pageY;
- var x1 = isX1 - canvas2.offsetLeft;
- var y1 = isY1 - canvas2.offsetTop;
- context2.lineTo(x1, y1);
- context2.stroke();
- context2.beginPath();
- context2.moveTo(x1, y1);
- };
- function EndMove(ev){
- var isX1 = isTouch ? ev.changedTouches[0].pageX : ev.pageX;
- var isY1 = isTouch ? ev.changedTouches[0].pageY : ev.pageY;
- var x1 = isX1 - canvas2.offsetLeft;
- var y1 = isY1 - canvas2.offsetTop;
- context2.lineTo(x1, y1);
- context2.stroke();
- canvas2.removeEventListener(MoveDraw, StartMove, false);
- canvas2.removeEventListener(EndDraw, EndMove, false);
- };
- canvas2.addEventListener(MoveDraw, StartMove, false);
- canvas2.addEventListener(EndDraw, EndMove, false);
- }, false);
- </script>
- </body>
- </html>
代码写完了,我也想说点其他的:
上面js代码中,有不少注释,我将其分为几个区域:插件方法封装区、命名区、功能实现区、刮刮乐区以及画笔区等,我感觉这样写加上一些注释,能使代码能加简洁,便于以后的维护!当然这只是个人观点,欢迎各位点击我博客右边公告栏的qq交流交流!
最后附上:
上篇博文:事件绑定与解绑!(只是一个简单的封装)
来看看效果,玩玩吧!
canvas刮刮乐和画笔的更多相关文章
- canvas刮刮乐
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...
- canvas 实现刮刮乐
在解决问题前,我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js 能够调用它来进行绘图. ...
- canvas刮刮乐游戏等
裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...
- canvas 写一个刮刮乐抽奖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas 绘制刮刮卡
思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...
随机推荐
- initWithCoder与initWithFrame的区别
1. initWithFrame方法是什么? initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对象,也有initWithFrame方 ...
- 数据库之SQL编程
定义局部变量 declare @num int 途径一: 途径二: set 和select赋值方式的区别 唯一区别,如果从数据库表中获取数据,只能用 select ) select @name =st ...
- Underscore-分析
0.Ecmascript的版本重要时间点 Ecmascript262-3 1999年,ie5.5及以后完全支持,ff,chrome等全部支持Ecmascript262-4 因为跨越太大,废弃Ecmas ...
- HDFS 架构解析
本文以 Hadoop 提供的分布式文件系统(HDFS)为例来进一步展开解析分布式存储服务架构设计的要点. 架构目标 任何一种软件框架或服务都是为了解决特定问题而产生的.还记得我们在 <分布式存储 ...
- 解读ASP.NET 5 & MVC6系列(1):ASP.NET 5简介
ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一 ...
- Android应用安全开发之浅谈加密算法的坑
<Android应用安全开发之浅谈加密算法的坑> 作者:阿里移动安全@伊樵,@舟海 阿里聚安全,一站式解决应用开发安全问题 Android开发中,难免会遇到需要加解密一些数据内 ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- .Net开发笔记(二十一) 反射在.net中的应用
反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...
- ASP.NET MVC学前篇之请求流程
ASP.NET MVC学前篇之请求流程 请求流程描述 对于请求的流程,文章的重点是讲HttpApplication和HttpModule之间的关系,以及一个简单的示例实现.(HttpModule又是M ...
- SharpFileDB - a file database for small apps
SharpFileDB - a file database for small apps 本文中文版在此处. I'm not an expert of database. Please feel fr ...