刮刮乐

来源：互联网发布：巨人网络借壳上市方案编辑：程序博客网时间：2024/06/06 20:11

<!DOCTYPE html>

<html>

<head>

#wrap {

position: relative;

}

#sourceIamge {

width: 600px;

height: 600px;

}

#myCanvas {

box-shadow: 0 0 10px goldenrod;

position: absolute;

left: 0;

top: 0;

}

</style>

</head>

<body>

</div>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

//盖灰色的

ctx.fillStyle = 'grey';

ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function() {

canvas.onmousemove = function() {

//获取点击位置

var pointX = event.clientX - canvas.offsetLeft;

var pointY = event.clientY - canvas.offsetTop;

ctx.globalCompositeOperation = 'destination-out';

ctx.beginPath();

ctx.arc(pointX,pointY, 15, 0, Math.PI * 2, false);

ctx.stroke();

ctx.fillStyle = 'white';

ctx.fill();

qing();

}

document.onmouseup = function (){

canvas.onmousemove = '';

}

function qing(){

var perfix = ctx.getImageData(0,0,canvas.width,canvas.height).data;

var count = 0;

for (var i=0;i<perfix.length;i+=4) {

if (perfix[i+3]==0) {

count++;

}

if (count>=perfix.length/10) {

ctx.clearRect(0,0,canvas.width,canvas.height);

}

</script>

</body>

</html>

0 0