总结canvas刮刮乐游戏
总结canvas刮刮乐游戏
- 思路
- 出现的问题总结
- 代码
思路
1.刮了图层后显示随机的背景图，设计鼠标抬起移动放下事件
2.利用新旧像素合并的时候被擦掉
ctx.globalCompositeOperation = 'destination-out'
3.快速移动会出现断点，那就直接让两边落下的地方连成线
4.利用getImageData这个方法获得里面的data，data里包含了每一个像素点的rgba，判断a这个属性值，从而判断当a这个为0的值的个数到达一定量时，就将灰色图层全部消除
出现的问题总结
1.解决快速移动断点的问题的时候，这里要注意把封闭路径写好，这跟先画圆还是先画线的顺序无关
2.关于如何让canvas居中，canvas不是块级元素，如果想要它居中的话，可以给它加个父级，可以直接用text-align：center，或者是margin：0 auto，但这个就要设置宽高才好使
3.addEventListener的第三个参数，false是冒泡，true是捕获
代码
<style>
* {
margin: 0;
padding: 0;
}
div{
/* width: 302px;
height: 302px;
margin: 0 auto; */
text-align: center;
}
canvas {
border: 1px solid #000;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>
<canvas width="300" height="300" id="myCanvas"></canvas>
</div>
<script>
var myCanvas = document.getElementById('myCanvas');
// 创建画布(注意不能使用jq的$，因为getContext方法必须作用在原生dom身上)
var ctx = myCanvas.getContext('2d');
var lastX, lastY, nowX, nowY;
init();
function init() {
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, 300, 300);
var oImg = new Image();
var r = Math.random();
oImg.src = r < 0.5 ? './img/duidui01.jpg' : './img/duidui02.jpg';
oImg.onload = function () {
myCanvas.style.backgroundImage = 'url(' + oImg.src + ')';
ctx.globalCompositeOperation = 'destination-out';
document.addEventListener('mousedown', downFun, false);
}
function downFun(e) {
var lastX = e.clientX - myCanvas.offsetLeft;
var lastY = e.clientY - myCanvas.offsetTop;
document.addEventListener('mousemove', moveFun, false);
document.addEventListener('mouseup', upFun, false);
}
function moveFun(e) {
var nowX = e.clientX - myCanvas.offsetLeft;
var nowY = e.clientY - myCanvas.offsetTop;
// 解决快速移动就断点问题
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(nowX, nowY, 20, 0, Math.PI * 2, 0);
ctx.fill();
ctx.beginPath();
ctx.lineWidth = '40';
ctx.moveTo(lastX, lastY);
ctx.lineTo(nowX, nowY);
ctx.stroke();
lastX = nowX;
lastY = nowY;
}
function upFun() {
document.removeEventListener('mousemove', moveFun, false);
clearAll();
}
// 大于画布面积0.8就消除所有的灰色
function clearAll() {
var d = ctx.getImageData(0, 0, 300, 300);
var len = d.data.length;
var num = 0;
for (i = 0; i < len; i += 4) {
if (d.data[i] == 0) {
num++;
}
}
if (num > 300 * 300 * 0.8) {
ctx.clearRect(0, 0, 300, 300);
}
}
}
</script>
</body>