简单的Canvas刮刮乐带动画效果的实例

最新推荐文章于 2024-08-18 20:11:48 发布

神神的蜗牛

最新推荐文章于 2024-08-18 20:11:48 发布

阅读量5.7k

点赞数

分类专栏： javascript 文章标签： canvas 刮刮乐刮奖

本文链接：https://blog.csdn.net/zhouzme/article/details/78894149

版权

今天做了个刮刮乐领奖品的小活动，感觉挺有用的，整理在这儿记录下

上个效果图先：

简单的Canvas刮奖带动画效果的实例

加了个简单的 css 动画效果

下面贴上主要代码:

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=0, user-scalable=0, minimum-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>H5 Canvas 刮刮乐</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div class="main">
    <div class="ggl-wrapper">
        <div class="ggl-bg-top-bolang"></div>
        <div id="scratch-ct" class="scratch-ct">
            <div id="scratch-inner" class="inner-ct">
                <div id="content-ct" class="content-ct" style="visibility: hidden;">
                    <img id="gift-cover" class="gift-cover" src="img/gift-cover.jpg" alt="">
                </div>
                <canvas id="scratch-canvas" class="scratch-canvas"></canvas>
                <div id="cav-cover" class="cav-cover"><div id="start-gg-bt" class="start-gg-bt">开始刮奖</div><div class="notice-gg-times">今日还有 <span style="color:red">8</span> 次刮奖机会<br>http://blog.csdn.net/zhouzme/</div></div>
            </div>
        </div>
        <div class="ggl-bg-bottom-bolang"></div>
    </div>
    <div id="gift-show-ct" class="gift-show-ct">
        <span id="close-bt" class="close-bt">×</span>
        <div class="show-inner small">
            <div class="panel-head"></div>
            <div class="panel-body">
                <img class="gift-cover" src="img/gift-cover.jpg" alt="">
                <div class="operator-ct"><a id="go-to-bt" class="go-to-bt" href="http://blog.csdn.net/zhouzme/" target="_blank">立即领取</a></div>
            </div>
        </div>
    </div>
</div>
<script src="./js/scratch.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

scratch.js

/**
 * 配置参数
 * 该Canvas刮刮卡插件的可用配置参数有：
 canvasId：canvas的id。
 imageBackground：背景图片（刮开后呈现的图片）。
 pictureOver：前景图片。
 sceneWidth：canvas的宽度。
 sceneHeight：canvas的高度。
 radius：清除区域的半径。
 nPoints：清除区域的杂点数量。
 percent：在清除多少区域之后清空canvas。
 cursor：光标。
 png：png格式的光标。
 x：Move position x。
 y：Move position y。
 cur：cur格式的光标（IE使用）。
 */

var Scratch = (function () {
   

    /**
     * Merge properties between two objects
     * @param obj1
     * @param obj2
     * @returns {
   {}}
     */
    function mergeOptions(obj1, obj2){
   
        var obj3 = {};
        for (var key in obj1) { obj3[key] = obj1[key]; }
        for (var key in obj2) { obj3[key] = obj2[key]; }
        return obj3;
    }

    /**
     * Generate a random number
     * @param min
     * @param max
     * @returns {Number}
     */