Canvas实现刮刮乐(附解析)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/SWSHBON/article/details/53184798

其实有很多地方都会用到这种刮刮乐的效果
有两个想法
1.设置两个canvas 的不同的 z-index 来设置其前后 形成遮罩层的效果 后面的一个canvas 实现绘图功能 前面一个canvas实现清除刮奖涂层的功能 当然也可以用一个canvas 在你别清除了时候边绘制(那样会过于占用资源 而且自我觉得实现麻烦没有采用)
2.一个div用来显示图片或者文字 canvas设置z-index做蒙版在上面 然后实现刮得效果。
遇到的问题
当两个canvas做层叠的时候 会因为透明而实现不了效果 还有你绘制的图片被遮挡 并不能显示出来

SO 自己采用了第二种方法
具体代码及其解释会在下文为大家呈现

<!--  网页部分-->
<!DOCTYPE html>
<html>
<head>
    <meta id="viewport" name="viewport" content="width=640,user-scalable=no,minimal-ui" />  <!--禁止用户缩放-->
</head>
<body>

    <div style="width:640px;margin:auto;">
        <!--刮刮乐-->
        <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
            <div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">即兴彩票</div>
            <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column; position:relative;">
               <!--此处为另一个效果 具体就不说了 如果上线为游戏欢迎大家试玩 -->
                @*<div style=" width: 300px;height: 200px;  position:absolute;">
                    <div style=" width: 300px;height: 200px; z-index: 1; ">
                        <div id="div_one" style="height: 100px; width: 100px; float: left;  background-color: #0480BE;"></div>
                        <div id="div_two" style="height: 100px; width: 100px; float: left; background-color:#004444"></div>
                        <div id="div_three" style="height: 100px; width: 100px; float: right; background-color: #005580; "></div>
                        <div id="div_four" style="height: 100px; width: 100px; float: left; clear: both; background-color: #149BDF;"></div>
                        <div id="div_five" style="height: 100px; width: 100px; float: left;  background-color: #008800;"></div>
                        <div id="div_six" style="height: 100px; width: 100px; float: left;  background-color: #149BDF;"></div>
                    </div>
                </div>
                <canvas id="canvas2" width="300px" height="200px" style="top:0;left:0;z-index:2; position: relative;">
                    sorry 您的浏览器不支持canvas该组件
                </canvas>
            </div>*@
            <div id="canvasArea" style="width:300px;height:200px;position:relative;">
                <div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:30px;color:indianred;">
                    <div id="div_img">
                        <img id="winpic" src="~/GIF/0.jpg" style="border-radius:50px">
                    </div>                   
                </div>
                <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
            </div>
        </div>
    </div>
    <div id="bg_div" style=" color:red ">
        <!--display:none;-->
        <div id="show">
            <label id="winResult">缺那么点运气</label>
        </div>
    </div>
    <script src="~/Scripts/ISWin.js"></script>   
</body>
</html>

接下来就是本页面的js文件了

 //页面加载完成之后就加载canvas的上下文
 //添加触摸事件和触摸滑动事件
 window.onload = function () {
        var canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");//这里没有给var 是让其成为全局变量都可以访问 
        canvas.addEventListener('touchstart', touch, false);
        canvas.addEventListener('touchend', touchend, false);
        draw();
    }
    //更改图片 在页面加载的时候就先把图片加载出来
    function changepic() {
        Scratch.ProducingPic("/Potiker/Frist", 'winpic', 'div_img');
    }

 function ISwin() {
        ShowDiv(bg_div);
        // draw();
    }
    function ShowDiv(show_div) {
         //这里是写死的 纯属故意   
        var img = document.getElementById('winpic'), result = '12.jpg';
        var name = img.src.substring(img.src.lastIndexOf('/') + 1).toString();
        if (name === result) {
            $("#winResult").text("哇偶你中奖了");
        } else {
            $("#winResult").text("遗憾了 !没中奖了");
        }       
        setTimeout(function () { ClearCanvas() }, 800);
        setTimeout(function () {  CloseDiv(bg_div) }, 1200);
        $("#bg_div").css("display", "block");
    };
    //关闭层
    function CloseDiv(bg_div) {      
        $("#bg_div").hide();
        draw();
        //$("#" + bg_div).css("style", "none");
    };

接下来就是 ISwin这个js文件了

//----------------------------③
(function () {
    // 事件绑定
    window.bindHandler = (function () {
        if (window.addEventListener) {// 标准浏览器
            return function (elem, type, handler) {
                // elem:节点    type:事件类型   handler:事件处理函数
                // 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意:ie没有这个参数
                elem.addEventListener(type, handler, false);
            }
        } else if (window.attachEvent) {// IE浏览器
            return function (elem, type, handler) {
                elem.attachEvent("on" + type, handler);
            }
        }

    }());
    // 事件解除
    window.removeHandler = (function () {
        if (window.removeEventListener) {// 标准浏览器
            return function (elem, type, handler) {
                elem.removeEventListener(type, handler, false);
            }
        } else if (window.detachEvent) {// IE浏览器
            return function (elem, type, handler) {
                elem.detachEvent("on" + type, handler);
            }
        }
    }());
    //添加清除事件及动作 (获取canvas 动作)


}());
//刮奖
var brush1 = function (event) {
    // ----------------------------②  
    var x = event.touches[0].clientX - canvas.getBoundingClientRect().left;
    var y = event.touches[0].clientY - canvas.getBoundingClientRect().top;
    // ----------------------------
    context.clearRect(x, y, 20, 20);
    //console.log(x, y);
};
/// 鼠标按下时 - 绑定鼠标跟随事件
function touch() {
    bindHandler(canvas, 'touchmove', brush1, false);
    changepic();
}
// 停止刮奖功能 - 解绑鼠标跟随事件
function touchend() {
    removeHandler(canvas, "mousemove", brush1, false);
    ISwin();
}


//更改图片 在页面加载的时候就先把图片加载出来
function changepic() {
    Scratch.Frist("/Potiker/Frist");
}

//测试绘制圆形遮罩
function draw() {
    context.fillStyle = '#A9AB9D';
    context.beginPath();
    context.arc(150, 102, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
}
//  改进意见: 逐步清除
function ClearCanvas() {
    context.clearRect(100, 50, 5 * 22, 5 * 22);
}

//这里是引入一个手机文件里面封装了一个XHRHttpResquset ① 
new_element = document.createElement("script");
new_element.setAttribute("type", "text/javascript");
new_element.setAttribute("src", "../Scripts/inc.js");
document.body.appendChild(new_element);





var Scratch =
    {   //请求客户信息
        Frist: function (url) {
            Ajax({

                method: 'get',
                type: 'json',
                url: url,
                callback: function (data) {

                }
            })
        },
        //用户点击绘制后 请求新的图片路径并赋值 
        //如果错误则调用 创建一张谢谢参与的图片
        ProducingPic: function (url, picid, piclocation) {
            var path;
            Ajax({
                method: 'get',
                type: 'json',
                url: url,
                callback: function (data) {
                    console.log(data);
                    if (data[1].static == "ok") {
                        path = data[0].img;
                    } else {
                        path = '';//请重新登录的图片
                    }
                    document.getElementById('' + picid).remove();
                    var imglocation = document.getElementById('' + piclocation);

                    var img = document.createElement('img');
                    //设置 img 属性,如 id
                    img.setAttribute("id", "" + picid);
                    img.style.borderRadius = "50px";
                    //设置 img 图片地址
                    img.src = "../GIF/" + path;
                    imglocation.appendChild(img);
                }
            })

        },
        //生成刮奖结果
        Result: function (url) {
            Ajax({
                method: 'GET',
                type: 'json',
                url: this.url,
                callback: function (data) {
                      //弹出中奖金额
                }
            })


        }

    }

解释 解释:
③ :首先将其封装之后你可以多个地方调用 这个显而易见 然后优先执行 你也是懂得
② : 这是一个计算 你的触摸到的canvas的坐标位置
① :这里是引入另一个文件中的某个方法
①=》很多时候我们会在书写js文件的时候去引入另一个文件中的方法
两种解决方案 : 一:把要引用的文件直接copy过来 写到这个文件当中去(吃亏不讨好 手机里当然是越小越好咯)。
二: 在js文件中动态引入 添加一个script的js标签。
注意事项: 由于是script标签 最好是在页面的body中引入。

刮刮乐的大体思路 :
页面绘制一个大的 DIV 里面嵌套一个div(你存放你刮出的内容) 在Div结束前放一个canvas(形成刮奖锡箔层)
Css 有 :DIV 绝对定位 div相对 canvas 相对 不同的 z-index;
javascript有:触摸 触摸滑动事件 触摸时的坐标 canvas 画圆(矩形什么的随你) canvas 随坐标清除区域
MVC : 很简单的一个返回json 没有贴出
效果图片这里写图片描述

展开阅读全文

没有更多推荐了,返回首页