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 ...

随机推荐

安装windows server 2012 r2 的那点事儿
windows server 2012 r2 安装无法找到install.wim 错误代码0x80070026,以及制作U启动盘决解ISO文件超过5G大小限制的解决方案用UltaISO刻录后,sou ...
拒绝了对对象 'base_config' (数据库 '****'，架构 'dbo')的 SELECT 权限
在网上看了很多资料都是空说一谈,都只是说很简单,然后没有说遇到这样的情况具体该怎么做,看到这里都知道是权限问题,其实我们每一个人都知道,又是我觉得我还是要给以后遇到的朋友个解决方法: 这里用到的数据 ...
使用DataList实现数据分页的技术
今天做网站的时候,用到了分页技术,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们. DataList控件可以按照列表的形式显示数据表中的多行记录,但是被显示的多行记录没有分页功能,使用起来不太方 ...
ABP理论学习之仓储
返回总目录本篇目录 IRepository接口查询插入更新删除其他关于异步方法仓储实现管理数据库连接仓储的生命周期仓储最佳实践 Martin Fowler对仓储的定义位于领域层 ...
node（async原理）
node中的async是用来实现同步操作的,提供包括map.Series等方法,本文不做赘述. 由于项目需要在浏览器端用了async.js,因此仔细看了下它的代码.原来,一直以为node是在服务端调用 ...
我的面板我做主 -- 淘宝UWP中自定义Panel的实现
在Windows10 UWP开发平台上内置的XMAL布局面板包括RelativePanel.StackPanel.Grid.VariableSizedWrapGrid 和 Canvas.在开发淘宝UW ...
Python黑帽编程 3.2 ARP监控
Python黑帽编程 3.2 ARP监控在第3.1节<ARP欺骗>中,我们学习了ARP的基本原理,使用Python实现了我们自己的ARP欺骗工具.在上一节的基础上,我们来实现一个ARP监 ...
剑指Offer面试题：18.二叉树的镜像
一.题目:二叉树的镜像题目:请完成一个函数,输入一个二叉树,该函数输出它的镜像.例如下图所示,左图是原二叉树,而右图则是该二叉树的镜像. 该二叉树节点的定义如下,采用C#语言描述: public c ...
titit. 深入理解内聚（ Cohesion）原理and attilax大总结
atitit. 深入理解内聚( Cohesion)原理and attilax大总结 1.1. 内聚的概念 1 1.1.1. 高内聚模式关于这个问题给出的答案是:分配职责,使其可保持 ...
详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

canvas刮刮乐和画笔

demo一：刮刮乐

布局

设置canvas画布

绘制刮奖区域

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

刮奖功能函数

为canvas元素onmousedown和onmouseup事件

demo二：画笔

布局

设置canvas画布

画笔功能函数

为canvas元素onmousedown和onmouseup事件

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

随机推荐

热门专题