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


Posted in HTML / CSS onDecember 30, 2016

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

效果图:

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

贴一张我中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

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

HTML / CSS 相关文章推荐
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 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
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
一些mootools的学习资源
2010/02/07 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python中update的基本使用方法详解
2019/07/17 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
行政管理专业推荐信
2013/11/02 职场文书
自我评价是什么
2014/01/04 职场文书
装修致歉信
2014/01/15 职场文书
运动会通讯稿100字
2014/01/31 职场文书
英语教研活动总结
2014/07/02 职场文书
天坛导游词
2015/02/02 职场文书
辞职书格式样本
2015/02/26 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫