html5刮刮卡,h5刮刮卡效果

HTML5页面的作用及应用场景有哪些

HTML5页面的作用

1、令企业发展更开阔：HTML5页面作为新兴的微信推广工具，可以应用各种各样的场景，比如产品展示、购买流程，购物车等，能让客户有更快的速度体验，不再卡顿。

2、令体验更完美：HTML5页面中的各种炫酷创新的场景模拟、动画效果、互动方式，都能给用户带来新鲜独特的完美体验，这是传统手机页面所不能媲美的。

HTML5页面可以运用到哪些应用场景

1、企业宣传：高大上的游戏能帮助企业快速聚集人气，让你的客户订单从游戏开始。

2、企业招聘：令企业走向人才，令人才近距离了解企业、认识企业，令招聘更高效。

3、商业营销：通过HTML5特性，使用大转盘，刮刮卡，满减满增等增加客户粘性，从而达到营销目的。

4、报名预约：旅游线路报名、教育课程报名、餐厅预约等场合都可以，多种表单预设，也可以自己创建新的预约流程，自由选择。

相关问答

Q1: html5画布常用吗

html5 Canvas在实现动画上性能会比DOM操作好，就是占用内存会比较多一点。html Canvas目前用的频率还算是比较高，特别是在html5游戏、html5 3d效果、html5动画等会用的会比较多。

html5 Canvas场景举例：

HTML5 弹幕功能

HTML5 刮刮卡功能

HTML5 游戏开发

HTML5 动画效果

备注：canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。

参考资料：

《canvas 系列教程》

Q2: html5 canvas 刮刮卡问题

!DOCTYPE html

html

head

  meta http-equiv="content-type" content="text/html; charset=UTF-8"

  title - jsFiddle demo by artwl/title

  

  script type='text/javascript' src='/js/lib/dummy.js'/script

  

  

  

  

  link rel="stylesheet" type="text/css" href="/css/result-light.css"

  

  style type='text/css'

    body{

    height:1000px;

}

#lotteryContainer {

    position:relative;

    width: 300px;

    height:100px;

}

#drawPercent {

    color:#F60;

}

  /style

  

/head

body

  button id="freshBtn"刷新/buttonlabel已刮开 span id="drawPercent"0%/span 区域。/label

div id="lotteryContainer"/div

  

script type='text/javascript'//![CDATA[ 

function Lottery(id, cover, coverType, width, height, drawPercentCallback) {

    this.conId = id;

    this.conNode = document.getElementById(this.conId);

    this.cover = cover;

    this.coverType = coverType;

    this.background = null;

    this.backCtx = null;

    this.mask = null;

    this.maskCtx = null;

    this.lottery = null;

    this.lotteryType = 'image';

    this.width = width || 300;

    this.height = height || 100;

    this.clientRect = null;

    this.drawPercentCallback = drawPercentCallback;

}

Lottery.prototype = {

    createElement: function (tagName, attributes) {

        var ele = document.createElement(tagName);

        for (var key in attributes) {

            ele.setAttribute(key, attributes[key]);

        }

        return ele;

    },

    getTransparentPercent: function(ctx, width, height) {

        var imgData = ctx.getImageData(0, 0, width, height),

            pixles = imgData.data,

            transPixs = [];

        for (var i = 0, j = pixles.length; i  j; i += 4) {

            var a = pixles[i + 3];

            if (a  128) {

                transPixs.push(i);

            }

        }

        return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);

    },

    resizeCanvas: function (canvas, width, height) {

        canvas.width = width;

        canvas.height = height;

        canvas.getContext('2d').clearRect(0, 0, width, height);

    },

    drawPoint: function (x, y) {

        this.maskCtx.beginPath();

        var radgrad = this.maskCtx.createRadialGradient(x, y, 0, x, y, 30);

        radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');

        radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)');

        this.maskCtx.fillStyle = radgrad;

        this.maskCtx.arc(x, y, 30, 0, Math.PI * 2, true);

        this.maskCtx.fill();

        if (this.drawPercentCallback) {

            this.drawPercentCallback.call(null, this.getTransparentPercent(this.maskCtx, this.width, this.height));

        }

    },

    bindEvent: function () {

        var _this = this;

        var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

        var clickEvtName = device ? 'touchstart' : 'mousedown';

        var moveEvtName = device? 'touchmove': 'mousemove';

        if (!device) {

            var isMouseDown = false;

            document.addEventListener('mouseup', function(e) {

                isMouseDown = false;

            }, false);

        } else {

            document.addEventListener("touchmove", function(e) {

                if (isMouseDown) {

                    e.preventDefault();

                }

            }, false);

            document.addEventListener('touchend', function(e) {

                isMouseDown = false;

            }, false);

        }

        this.mask.addEventListener(clickEvtName, function (e) {

            isMouseDown = true;

            var docEle = document.documentElement;

            if (!_this.clientRect) {

                _this.clientRect = {

                    left: 0,

                    top:0

                };

            }

            var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;

            var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;

            _this.drawPoint(x, y);

        }, false);

        this.mask.addEventListener(moveEvtName, function (e) {

            if (!device  !isMouseDown) {

                return false;

            }

            var docEle = document.documentElement;

            if (!_this.clientRect) {

                _this.clientRect = {

                    left: 0,

                    top:0

                };

            }

            var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;

            var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;

            _this.drawPoint(x, y);

        }, false);

    },

    drawLottery: function () {

        this.background = this.background || this.createElement('canvas', {

            style: 'position:absolute;left:0;top:0;'

        });

        this.mask = this.mask || this.createElement('canvas', {

            style: 'position:absolute;left:0;top:0;'

        });

        if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) {

            this.conNode.appendChild(this.background);

            this.conNode.appendChild(this.mask);

            this.clientRect = this.conNode ? this.conNode.getBoundingClientRect() : null;

            this.bindEvent();

        }

        this.backCtx = this.backCtx || this.background.getContext('2d');

        this.maskCtx = this.maskCtx || this.mask.getContext('2d');

        if (this.lotteryType == 'image') {

            var image = new Image(),

                _this = this;

            image.onload = function () {

                _this.width = this.width;

                _this.height = this.height;

                _this.resizeCanvas(_this.background, this.width, this.height);

                _this.backCtx.drawImage(this, 0, 0);

                _this.drawMask();

            }

            image.src = this.lottery;

        } else if (this.lotteryType == 'text') {

            this.width = this.width;

            this.height = this.height;

            this.resizeCanvas(this.background, this.width, this.height);

            this.backCtx.save();

            this.backCtx.fillStyle = '#FFF';

            this.backCtx.fillRect(0, 0, this.width, this.height);

            this.backCtx.restore();

            this.backCtx.save();

            var fontSize = 30;

            this.backCtx.font = 'Bold ' + fontSize + 'px Arial';

            this.backCtx.textAlign = 'center';

            this.backCtx.fillStyle = '#F60';

            this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2);

            this.backCtx.restore();

            this.drawMask();

        }

    },

    drawMask: function() {

        this.resizeCanvas(this.mask, this.width, this.height);

        if (this.coverType == 'color') {

            this.maskCtx.fillStyle = this.cover;

            this.maskCtx.fillRect(0, 0, this.width, this.height);

            this.maskCtx.globalCompositeOperation = 'destination-out';

        } else if (this.coverType == 'image'){

            var image = new Image(),

                _this = this;

            image.onload = function () {

                _this.maskCtx.drawImage(this, 0, 0);

                _this.maskCtx.globalCompositeOperation = 'destination-out';

            }

            image.src = this.cover;

        }

    },

    init: function (lottery, lotteryType) {

        this.lottery = lottery;

        this.lotteryType = lotteryType || 'image';

        this.drawLottery();

    }

}

window.onload = function () {

    var lottery = new Lottery('lotteryContainer', '#CCC', 'color', 300, 100, drawPercent);

    lottery.init('', 'image');

    

    document.getElementById('freshBtn').onclick = function() {

        drawPercentNode.innerHTML = '0%';

        lottery.init(getRandomStr(10), 'text');

    }

    

    var drawPercentNode = document.getElementById('drawPercent');

    

    function drawPercent(percent) {

        drawPercentNode.innerHTML = percent + '%';

    }

}

function getRandomStr(len) {

    var text = "";

    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i  len; i++ )

        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;

}

//]]  

/script

/body

/html

亲，看看这个对你有帮助么