编程 HTML / CSS

HTML5+CSS3实例：canvas 模拟实现电子彩票刮刮乐代码

Posted in HTML / CSS onDecember 30, 2016

今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成Android版本的，或者其他的~

效果图：

贴一张我中500w的照片，咋办啊，怎么花呢~

HTML5+CSS3实例：canvas 模拟实现电子彩票刮刮乐代码

好了，下面开始原理：

1、刮奖区域两个Canvas，一个是front ，一个back ，front遮盖住下面的canvas。

2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监听mouse事件，根据mousemove的x,y坐标，进行擦出front canvas上的矩形区域，然后显示出下面的canvas的效果图。

很简单把~嘿嘿~

1、HTML文件内容：

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8">  
  
    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>  
    <script type="text/javascript" src="canvas2d.js"></script>  
  
    <script type="text/javascript" src="GuaGuaLe2.js"></script>  
  
    <script type="text/javascript">  
  
        $(function ()  
        {  
            var guaguale = new GuaGuaLe("front", "back");  
            guaguale.init({msg: "￥5000000.00"});  
        });  
    </script>  
    <style type="text/css">  
  
  
        body  
        {  
            background: url("s_bd.jpg") repeat 0 0;  
        }  
  
        .container  
        {  
            position: relative;  
            width: 400px;  
            height: 160px;  
            margin: 100px auto 0;  
            background: url(s_title.png) no-repeat 0 0;  
            background-size: 100% 100%;  
        }  
  
        #front, #back  
        {  
            position: absolute;  
            width: 200px;  
            left: 50%;  
            top: 100%;  
            margin-left: -130px;  
            height: 80px;  
            border-radius: 5px;  
            border: 1px solid #444;  
        }  
  
    </style>  
  
</head>  
<body>  
  
<div class="container">  
    <canvas id="back" width="200" height="80"></canvas>  
    <canvas id="front" width="200" height="80"></canvas>  
</div>  
  
  
</body>  
</html>

2、首先我利用了一个以前写的canvas辅助类，留下来今天要用的一些方法：

/** 
 * Created with JetBrains WebStorm. 
 * User: zhy 
 * Date: 13-12-17 
 * Time: 下午9:42 
 * To change this template use File | Settings | File Templates. 
 */  
  
function Canvas2D($canvas)  
{  
    var context = $canvas[0].getContext("2d"),  
        width = $canvas[0].width,  
        height = $canvas[0].height,  
        pageOffset = $canvas.offset();  
  
  
    context.font = "24px Verdana, Geneva, sans-serif";  
    context.textBaseline = "top";  
  
  
    /** 
     * 绘制矩形 
     * @param start 
     * @param end 
     * @param isFill 
     */  
    this.drawRect = function (start, end, isFill)  
    {  
        var w = end.x - start.x , h = end.y - start.y;  
        if (isFill)  
        {  
            context.fillRect(start.x, start.y, w, h);  
        }  
        else  
        {  
            context.strokeRect(start.x, start.y, w, h);  
        }  
    };  
  
    /** 
     * 根据书写的文本，得到该文本在canvas上书写的中心位置的左上角坐标 
     * @param text 
     * @returns {{x: number, y: number}} 
     */  
    this.caculateTextCenterPos = function (text)  
    {  
        var metrics = context.measureText(text);  
        console.log(metrics);  
//        context.font = fontSize + "px Verdana, Geneva, sans-serif";  
        var textWidth = metrics.width;  
        var textHeight = parseInt(context.font);  
  
        return {  
            x: width / 2 - textWidth / 2,  
            y: height / 2 - textHeight / 2  
        };  
    }  
    this.width = function ()  
    {  
        return width;  
    }  
    this.height = function ()  
    {  
        return height;  
    }  
    this.resetOffset = function ()  
    {  
        pageOffset = $canvas.offset();  
    }  
    /** 
     * 当屏幕大小发生变化，重新计算offset 
     */  
    $(window).resize(function ()  
    {  
        pageOffset = $canvas.offset();  
    });  
  
    /** 
     * 将页面上的左边转化为canvas中的坐标 
     * @param pageX 
     * @param pageY 
     * @returns {{x: number, y: number}} 
     */  
    this.getCanvasPoint = function (pageX, pageY)  
    {  
        return{  
            x: pageX - pageOffset.left,  
            y: pageY - pageOffset.top  
        }  
    }  
    /** 
     * 清除区域，此用户鼠标擦出刮奖涂层 
     * @param start 
     * @returns {*} 
     */  
    this.clearRect = function (start)  
    {  
        context.clearRect(start.x, start.y, 10, 10);  
        return this;  
    };  
  
    /** 
     *将文本绘制到canvas的中间 
     * @param text 
     * @param fill 
     */  
    this.drawTextInCenter = function (text, fill)  
    {  
        var point = this.caculateTextCenterPos(text);  
        if (fill)  
        {  
            context.fillText(text, point.x, point.y);  
        }  
        else  
        {  
            context.strokeText(text, point.x, point.y);  
        }  
    };  
    /** 
     * 设置画笔宽度 
     * @param newWidth 
     * @returns {*} 
     */  
    this.penWidth = function (newWidth)  
    {  
        if (arguments.length)  
        {  
            context.lineWidth = newWidth;  
            return this;  
        }  
        return context.lineWidth;  
    };  
  
    /** 
     * 设置画笔颜色 
     * @param newColor 
     * @returns {*} 
     */  
    this.penColor = function (newColor)  
    {  
        if (arguments.length)  
        {  
            context.strokeStyle = newColor;  
            context.fillStyle = newColor;  
            return this;  
        }  
  
        return context.strokeStyle;  
    };  
  
    /** 
     * 设置字体大小 
     * @param fontSize 
     * @returns {*} 
     */  
    this.fontSize = function (fontSize)  
    {  
        if (arguments.length)  
        {  
            context.font = fontSize + "px Verdana, Geneva, sans-serif";  
  
            return this;  
        }  
  
        return context.fontSize;  
    }  
  
  
}

这个类也就对Canvas对象进行了简单的封装，设置参数，绘制图形什么的，比较简单，大家可以完善下这个类~

3、GuaGuaLe.js

/** 
 * Created with JetBrains WebStorm. 
 * User: zhy 
 * Date: 14-6-24 
 * Time: 上午11:36 
 * To change this template use File | Settings | File Templates. 
 */  
function GuaGuaLe(idFront, idBack)  
{  
    this.$eleBack = $("#" + idBack);  
    this.$eleFront = $("#" + idFront);  
    this.frontCanvas = new Canvas2D(this.$eleFront);  
    this.backCanvas = new Canvas2D(this.$eleBack);  
  
    this.isStart = false;  
  
}  
  
GuaGuaLe.prototype = {  
    constructor: GuaGuaLe,  
    /** 
     * 将用户的传入的参数和默认参数做合并 
     * @param desAttr 
     * @returns {{frontFillColor: string, backFillColor: string, backFontColor: string, backFontSize: number, msg: string}} 
     */  
    mergeAttr: function (desAttr)  
    {  
        var defaultAttr = {  
            frontFillColor: "silver",  
            backFillColor: "gold",  
            backFontColor: "red",  
            backFontSize: 24,  
            msg: "谢谢惠顾"  
        };  
        for (var p in  desAttr)  
        {  
            defaultAttr[p] = desAttr[p];  
        }  
  
        return defaultAttr;  
  
    },  
  
  
    init: function (desAttr)  
    {  
  
        var attr = this.mergeAttr(desAttr);  
  
        //初始化canvas  
        this.backCanvas.penColor(attr.backFillColor);  
        this.backCanvas.fontSize(attr.backFontSize);  
        this.backCanvas.drawRect({x: 0, y: 0}, {x: this.backCanvas.width(), y: this.backCanvas.height()}, true);  
        this.backCanvas.penColor(attr.backFontColor);  
        this.backCanvas.drawTextInCenter(attr.msg, true);  
        //初始化canvas  
        this.frontCanvas.penColor(attr.frontFillColor);  
        this.frontCanvas.drawRect({x: 0, y: 0}, {x: this.frontCanvas.width(), y: this.frontCanvas.height()}, true);  
  
        var _this = this;  
        //设置事件  
        this.$eleFront.mousedown(function (event)  
        {  
            _this.mouseDown(event);  
        }).mousemove(function (event)  
            {  
                _this.mouseMove(event);  
            }).mouseup(function (event)  
            {  
                _this.mouseUp(event);  
            });  
    },  
    mouseDown: function (event)  
    {  
        this.isStart = true;  
        this.startPoint = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);  
    },  
    mouseMove: function (event)  
    {  
        if (!this.isStart)return;  
        var p = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);  
        this.frontCanvas.clearRect(p);  
    },  
    mouseUp: function (event)  
    {  
        this.isStart = false;  
    }  
};

通过用户传入的两个canvas的id，然后生成一个对象，进行初始化操作，设置事件。当然了也提供用户设置可选的参数，各种颜色，已经刮开后显示的信息等，通过

{
            frontFillColor: "silver",
            backFillColor: "gold",
            backFontColor: "red",
            backFontSize: 24,
            msg: "谢谢惠顾"
        };

传给init方法进行设置。

好了，然后就基本完工了，测试一下：

基本实现了刮开图层，但是存在一个小问题，就是当用户滑动特别快时，会出现一些断点，当然也可以忽略，不过我们准备提供一下解决方案：

HTML5+CSS3实例：canvas 模拟实现电子彩票刮刮乐代码

产生原因：由于鼠标移动速度过快，产生的断点；解决方案：将mousemove中两次的鼠标左边，进行拆分成多个断点坐标：

HTML5+CSS3实例：canvas 模拟实现电子彩票刮刮乐代码

如上图，把两点之间进行连线，根据斜率，然后分成多个小段，分别获得线段上的坐标（有四种可能，有兴趣可以画画图，计算下，代码如下）：

var k;  
      if (p.x > this.startPoint.x)  
      {  
          k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x);  
          for (var i = this.startPoint.x; i < p.x; i += 5)  
          {  
              this.frontCanvas.clearRect({x: i, y: (this.startPoint.y + (i - this.startPoint.x) * k)});  
          }  
      } else  
      {  
          k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x);  
          for (var i = this.startPoint.x; i > p.x; i -= 5)  
          {  
              this.frontCanvas.clearRect({x: i, y: (this.startPoint.y + ( i - this.startPoint.x  ) * k)});  
          }  
      }  
      this.startPoint = p;

4、最后贴一下完整的GuaGuaLe.js

/** 
 * Created with JetBrains WebStorm. 
 * User: zhy 
 * Date: 14-6-24 
 * Time: 上午11:36 
 * To change this template use File | Settings | File Templates. 
 */  
function GuaGuaLe(idFront, idBack)  
{  
    this.$eleBack = $("#" + idBack);  
    this.$eleFront = $("#" + idFront);  
    this.frontCanvas = new Canvas2D(this.$eleFront);  
    this.backCanvas = new Canvas2D(this.$eleBack);  
  
    this.isStart = false;  
  
}  
  
GuaGuaLe.prototype = {  
    constructor: GuaGuaLe,  
    /** 
     * 将用户的传入的参数和默认参数做合并 
     * @param desAttr 
     * @returns {{frontFillColor: string, backFillColor: string, backFontColor: string, backFontSize: number, msg: string}} 
     */  
    mergeAttr: function (desAttr)  
    {  
        var defaultAttr = {  
            frontFillColor: "silver",  
            backFillColor: "gold",  
            backFontColor: "red",  
            backFontSize: 24,  
            msg: "谢谢惠顾"  
        };  
        for (var p in  desAttr)  
        {  
            defaultAttr[p] = desAttr[p];  
        }  
  
        return defaultAttr;  
  
    },  
  
  
    init: function (desAttr)  
    {  
  
        var attr = this.mergeAttr(desAttr);  
  
        //初始化canvas  
        this.backCanvas.penColor(attr.backFillColor);  
        this.backCanvas.fontSize(attr.backFontSize);  
        this.backCanvas.drawRect({x: 0, y: 0}, {x: this.backCanvas.width(), y: this.backCanvas.height()}, true);  
        this.backCanvas.penColor(attr.backFontColor);  
        this.backCanvas.drawTextInCenter(attr.msg, true);  
        //初始化canvas  
        this.frontCanvas.penColor(attr.frontFillColor);  
        this.frontCanvas.drawRect({x: 0, y: 0}, {x: this.frontCanvas.width(), y: this.frontCanvas.height()}, true);  
  
        var _this = this;  
        //设置事件  
        this.$eleFront.mousedown(function (event)  
        {  
            _this.mouseDown(event);  
        }).mousemove(function (event)  
            {  
                _this.mouseMove(event);  
            }).mouseup(function (event)  
            {  
                _this.mouseUp(event);  
            });  
    },  
    mouseDown: function (event)  
    {  
        this.isStart = true;  
        this.startPoint = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);  
    },  
    mouseMove: function (event)  
    {  
        if (!this.isStart)return;  
        var p = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);  
        this.frontCanvas.clearRect(p);  
    },  
    mouseUp: function (event)  
    {  
        this.isStart = false;  
    }  
};

源码点击下载：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

HTML5+CSS3实例：canvas 模拟实现电子彩票刮刮乐代码

- Author -

鸿洋_

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

css3中用animation的steps属性制作帧动画

Apr 25 HTML / CSS

CSS3 简单又实用的5个属性

Mar 04 HTML / CSS

详解CSS3 Media Queries中媒体属性的使用

Feb 29 HTML / CSS

HTML5 Web 存储详解

Sep 16 HTML / CSS

HTML5 canvas实现雪花飘落特效

Mar 08 HTML / CSS

详解移动端HTML5音频与视频问题及解决方案

Aug 22 HTML / CSS

HTML5 对各个标签的定义与规定：body的介绍

Jun 21 HTML / CSS

使用CSS实现弹性视频html5案例实践

Dec 26 HTML / CSS

html5的画布canvas——画出简单的矩形、三角形实例代码

Jun 09 HTML / CSS

HTML5之语义标签介绍

Jul 07 HTML / CSS

使用html2canvas.js实现页面截图并显示或上传的示例代码

Dec 18 HTML / CSS

css 中多种边框的实现小窍门

Apr 07 HTML / CSS

HTML5+CSS3 诱人的实例：3D立方体旋转动画实例

Dec 30 #HTML / CSS

CSS3实现瀑布流布局与无限加载图片相册的实例代码

Dec 22 #HTML / CSS

详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

Dec 20 #HTML / CSS

详解CSS3浏览器兼容

Dec 14 #HTML / CSS

Css3新特性应用之视觉效果实例

Dec 12 #HTML / CSS

使用CSS3 制作一个material-design 风格登录界面实例

Dec 12 #HTML / CSS

Css3新特性应用之形状总结

Dec 08 #HTML / CSS

HTML5+CSS3实例 ：canvas 模拟实现电子彩票刮刮乐代码

HTML5+CSS3实例：canvas 模拟实现电子彩票刮刮乐代码