前端ABC<!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实现手机端刮刮乐