<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#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 id="wrap">
<img src="img/1.jpg" id="sourceIamge" />
<canvas id="myCanvas" width="600" height="600"></canvas>
</div>
<script type="text/javascript">
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>
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
