这周有点迷茫，不知道干嘛了，一天天就过去了！我在博客右侧公告栏加了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个：

  1. flex布局，将‘祝君中奖’垂直居中，目前还有兼容问题，不过看我们大前端的发展趋势，应该很快就能搞定了；
  2. 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);
  1. 填充颜色；
  2. 绘制实心矩形；
  3. 设置字体颜色；
  4. 设置字体大小类型；
  5. 绘制实心字体。

以上都是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刮刮乐和画笔的更多相关文章

  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. centos 格式化分区

    #格式化U盘,成fat32 fdisk -l #获取U盘设备信息 #Disk /dev/sdc: 16.0 GB, 16025387008 bytes, 31299584 sectors#Units ...

  2. PHP uniqid 高并发生成不重复唯一ID

    http://www.51-n.com/t-4264-1-1.html PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳.在高并发或者间隔时长极短(如循环代码)的情 ...

  3. jquery 购物车飞入效果

    github https://github.com/amibug/fly demo https://github.com/amibug/fly

  4. HTML实现简单计算器

    <!DOCTYPE html> <html> <meta name="content-type" content="text/html; c ...

  5. 解读2015年互联网UGC内容发展态势，安全事件频发

    <2015内容安全年报> 阿里移动安全 第一章 2015年内容安全形势 随着互联网业务的迅速发展,互联网上的信息内容带来了爆炸式的增长.由于缺乏对网络活动进行有效监督和管理的措施,致使互联 ...

  6. ABP理论学习之发布说明

    返回总目录 查看更详细信息以及下载源代码请查看原文档 ABP v0.9.2.0 | [更新日期:2016/6/6 11:21:28 ] 解决方案转换成xproj/project.json格式. 添加了 ...

  7. Net作业调度(三) — Quartz.Net进阶

    介绍 前面介绍Quartz.Net的基本用法,但在实际应用中,往往有更多的特性需求,比如记录job执行的执行历史,发邮件等. 阅读目录 Quartz.Net插件 TriggerListener,Job ...

  8. java中文乱码解决之道（六）-----javaWeb中的编码解码

    在上篇博客中LZ介绍了前面两种场景(IO.内存)中的java编码解码操作,其实在这两种场景中我们只需要在编码解码过程中设置正确的编码解码方式一般而言是不会出现乱码的.对于我们从事java开发的人而言, ...

  9. percona5.7 源码安装

    200 ? "200px" : this.width)!important;} --> 介绍 主要为了测试percona的线程池的性能,这里就简单介绍一下percona5.7 ...

  10. 几个常用Json组件的性能测试

    上一篇文章中我已经介绍了JsonBuilder方案的整体思路以及一个版本的雏形代码,他现在已经是可以使用的了,但是因为是实时反射的,所以效率并不高. 鉴于几位博友对Json转换组件的性能有兴趣,我先放 ...