canvas实现手机端刮刮乐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
  	<title>canvas beginePath example</title>
  	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div style="position:relative;">
	<div style="width:300px;height:200px;text-align:center;vertical-align:middle;background-color:#fbda61;">
		<p style="line-height:200px;color:#FFF;font-size:16px;">谢谢惠顾</p>
	</div>
    <canvas id="demo" width="300" height="200" style="position:absolute;top:0;">canvas-unsupported code here</canvas>
</div>
	
</body>
 <script>
    var canvasEle = document.getElementById("demo");
    var ctx = document.getElementById("demo").getContext("2d"); //得到画布
    var ctxWidth = canvasEle.offsetWidth; //获取canvasEle的宽度和高度
    var ctxHeight = canvasEle.offsetHeight;
    
    ctx.beginPath();
    ctx.fillStyle ="#d8d8d8"; //填充颜色
    ctx.fillRect(0,0,ctxWidth, ctxHeight);//画矩形
    ctx.closePath();

    ctx.font ="30px Arial"; //字体大小和family
    ctx.fillStyle ="#A79485"; //字体颜色
    ctx.textBaseline = "middle"; //设置字体基线
    ctx.textAlign = "center"; //字体水平居中
    ctx.fillText("Draw a lottery", ctxWidth/2, ctxHeight/2);

    var area = ctxWidth * ctxHeight;
    l = canvasEle.offsetLeft;
    t = canvasEle.offsetTop;


    /*绑定触摸屏幕事件*/
    var bindEvent = function(){
        canvasEle.addEventListener('touchstart',startFunc,false);
        canvasEle.addEventListener('touchmove', moveFunc, false);
        canvasEle.addEventListener('touchend', endFunc, false);
    };
     var firstFlag = true;
    var startFunc = function(){
    	if(firstFlag){
    		console.log("首次触屏时发生的函数,可以在这里请求后台拿到奖券的数据");
    	}
    };
    var moveFunc = function(e){
		  var touch = e.touches[0],
	                posX = touch.clientX - l,
	                posY = touch.clientY - t;
	        ctx.beginPath();
	        ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);
	        ctx.fill();
    };
	var endFunc = function(){
	    var data = ctx.getImageData(0, 0, ctxWidth, ctxHeight).data,
	            scrapeNum = 0;
	    for(var i = 3, len = data.length; i < len; i += 4){
	        if(data[i] === 0){
	            scrapeNum++;
	        }
	    }
	    if(scrapeNum > area * 0.3){ //刮掉面积大于某个值时 全部清除
	        ctx.clearRect(0, 0, ctxWidth, ctxHeight);
	        canvasEle.removeEventListener('touchmove', moveFunc, false);
	        canvasEle.removeEventListener('touchend', endFunc, false);
	    }
	}

	 $(document).ready(function () {
        ctx.globalCompositeOperation = 'destination-out';
        bindEvent();
    });
    </script>
</html>

1.这里值得注意的是 canvas的宽度和高度必须单独写,写在style下是不行的。用offsetWidth,offsetHeight获取宽高度;
2.可以在startFunc里面调用接口 获取奖券的信息;
3.在矩形上绘制文本水平垂直居中,fillText(text,x,y,maxWidth);x,y两个参数是设置相对于画布的x,y坐标,再用textBaseline,textAlign设置居中即可;
4.本文刮刮乐的主要思想是 页面初始化时先用一个div放在canvas的下面,设置好样式,进行隐藏,canvas放在上面;首次触屏时 请求接口 替换奖券数据,当刮掉面积超过某个值时,自动清除所有;
5.浏览器需要在手机模式下才能看到效果。

总之,本文仅供参考,如有不足之处,请指正。

 

欢迎分享本文,转载请保留出处:前端ABC » canvas实现手机端刮刮乐

赞 (2)
分享到:更多 ()

发表评论 0