前端开发canvas实现刮奖效果

网站前端程序制作开发|百度地图 前端开发|求前端游戏开发书籍

原理

在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可。

DEMO

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>无标题文档</title>
<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />
<style>
.content,.cover{width:400px; height:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px;}
.content{ font-size:48px; line-height:400px; text-align:center;}
h3{ text-align:center; line-height:200px;}
</style>

</head>

<body>
<h3>快来刮开!!!</h3>
<div class=”content” >中奖啦~!</div>
<canvas id=”cover” class=”cover” width=”400″ height=”400″></canvas>
</body>

<script>
var isdown = false,
cover = document.getElementById(“cover”),

covercanvas = cover.getContext(“2d”);
//
covercanvas.fillStyle=”transparent”;
//要在fillter()之前先定义画布背景为透明
covercanvas.fillRect(0,0,400,400);

function fillter( canvas ){
//定义画布背景为#ccc和画布大小
canvas.fillStyle=”#ccc”;
canvas.fillRect(0,0,400,400);
}
function isDown(e){
//判断鼠标和手指是否按下
e.preventDefault();
isdown=true;
}
function isUp(e){
//判断鼠标和手指是否抬起
isdown=false;
}
function draw( e ){
//如果isdown为true(即鼠标或手指在画布区域按下)获取其在画布上的位置并画出轨迹
e.preventDefault();
if(isdown){
if(e.changedTouches){
//判断如果是touch事件(即手指按下)改变event
e=e.changedTouches[e.changedTouches.length-1];
}

var _height= parseInt((window.innerHeight-400)/2),
_width= parseInt((window.innerWidth-400)/2),
touchTop=e.clientY – _height,
touchLeft=e.clientX – _width;

with(covercanvas){
// 画出按下时画布上显示的图案(这里是一个半径为10px的圆形)
beginPath();
arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
fill();
}
}
//alert(touchTop);
}
fillter(covercanvas);
covercanvas.globalCompositeOperation = ‘destination-out’;
cover.addEventListener(‘touchstart’,isDown);
cover.addEventListener(‘touchmove’,draw);
cover.addEventListener(‘touchend’,isUp);
cover.addEventListener(‘mousemove’,draw);
cover.addEventListener(‘mousedown’,isDown);
cover.addEventListener(‘mouseup’,isUp);

</script>
</html>

分析

demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容。本demo是用时需要改变的内容为_width,_height,touchTop,touchLeft这几个参数,根据自身画布的位置自行计算即可。由于是长按事件,记得在移动端阻止浏览器默认功能。

代码片段 1

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>无标题文档</title>
    <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />
    <style>
        .content,
        .cover {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -200px 0 0 -200px;
        }
        .content {
            font-size: 48px;
            line-height: 400px;
            text-align: center;
        }
        h3 {
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <h3>快来刮开!!!</h3>
    <div class=”content”>中奖啦~!</div>
    <canvas id=”cover” class=”cover” width=”400″ height=”400″></canvas>
</body>
<script>
    var isdown = false,
        cover = document.getElementById(“cover”),
        covercanvas = cover.getContext(“2d”);
    //
    covercanvas.fillStyle = “transparent”;
    covercanvas.fillRect(0, 0, 400, 400);
    function fillter(canvas) {
        canvas.fillStyle = “#ccc”;
        canvas.fillRect(0, 0, 400, 400);
    }
    function isDown(e) {
        e.preventDefault();
        isdown = true;
    }
    function isUp(e) {
        isdown = false;
    }
    function draw(e) {
        e.preventDefault();
        if (isdown) {
            if (e.changedTouches) {
                e = e.changedTouches[e.changedTouches.length – 1];
            }
            var _height = parseInt((window.innerHeight – 400) / 2),
                _width = parseInt((window.innerWidth – 400) / 2),
                touchTop = e.clientY – _height,
                touchLeft = e.clientX – _width;
            with (covercanvas) {
                beginPath();
                arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
                fill();
            }
        }
        //alert(touchTop);
    }
    fillter(covercanvas);
    covercanvas.globalCompositeOperation = ‘destination-out’;
    cover.addEventListener(‘touchstart’, isDown);
    cover.addEventListener(‘touchmove’, draw);
    cover.addEventListener(‘touchend’, isUp);
    cover.addEventListener(‘mousemove’, draw);
    cover.addEventListener(‘mousedown’, isDown);
    cover.addEventListener(‘mouseup’, isUp);
</script>
</html>
2017web前端开发笔试题|sts前端开发环境|广州4399游戏前端开发
» 本文来自:前端开发者 » 《前端开发canvas实现刮奖效果》
» 本文链接地址:https://www.rokub.com/5051.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!