HTML5+CSS3案例 :canvas 仿真模拟完成电子器件彩票

日期:2021-03-02 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

今日给大伙儿带来1个刮刮乐的小事例~根据HTML5 canvas的,有兴趣爱好的能够改为Android版本号的,或别的的~

实际效果图:

贴1张我中500w的相片,咋办啊,如何花呢~

好了,下面刚开始基本原理:

1、刮奖地区两个Canvas,1个是front , 1个back ,front遮住住下面的canvas。

2、canvas默认设置填充了1个矩形框,将下面canvas实际效果图遮住,随后监视mouse恶性事件,依据mousemove的x,y座标,开展擦出front canvas上的矩形框地区,随后显示信息出下面的canvas的实际效果图。

很简易把~嘿嘿~

1、HTML文档內容:

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf⑻">  
  
    <script type="text/javascript" src="../../jquery⑴.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: ⑴30px;  
            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、最先我运用了1个之前写的canvas輔助类,留下来今日要用的1些方式:

/** 
 * Created with JetBrains WebStorm. 
 * User: zhy 
 * Date: 13⑴2⑴7 
 * 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⑹⑵4 
 * 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,随后转化成1个目标,开展原始化实际操作,设定恶性事件。自然了也出示客户设定可选的主要参数,各种各样色调,早已刮开后显示信息的信息内容等,根据

{
            frontFillColor: "silver",
            backFillColor: "gold",
            backFontColor: "red",
            backFontSize: 24,
            msg: "感谢光临"
        };

发送给init方式开展设定。

好了,随后就基础竣工了,检测1下:

基础完成了刮开涂层,可是存在1个小难题,便是当客户拖动非常快时,会出現1些断点,自然还可以忽视,但是大家提前准备出示1下处理计划方案:

造成缘故:因为电脑鼠标挪动速率过快,造成的断点;处理计划方案:将mousemove中两次的电脑鼠标左侧,开展拆分为好几个断点座标:

如上图,把两点之间开展连线,依据斜率,随后分为好几个小段,各自得到直线上的座标(有4种将会,有兴趣爱好能够画画图,测算下,编码以下):

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、最终贴1下详细的GuaGuaLe.js

/** 
 * Created with JetBrains WebStorm. 
 * User: zhy 
 * Date: 14⑹⑵4 
 * 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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:运用css完成波纹动漫实际效果案例 返回下一篇:没有了