前端ABC<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style>
canvas{
border: 1px solid #000;
display: block;
margin: 0 auto;
background-size: 300px 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
<script>
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' );
var w = canvas.width,
h = canvas.height;
/*随机生成奖品*/
var awards = [ '美女一只', 'sorry 很遗憾。再接再厉', '抓住一只单身狗', '滚去敲代码', 'sorry 很遗憾。再接再厉', '美女一只', '抓住一只单身狗', '滚去敲代码', '抓住一只单身狗', 'sorry 很遗憾。再接再厉',
'抓住一只单身狗' ];
/*随机生成一个索引*/
var award=awards[Math.floor(Math.random()*awards.length)];
/*将奖品信息绘制在canvas*/
ctx.font='bold 32px sans-serif';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillText(award,w/2,h/2);
/*然后将奖品信息装换成canvas的背景图 1为最高质量*/
var dataurl=canvas.toDataURL('image/png',1);
canvas.style.background='url('+dataurl+')';
ctx.clearRect(0,0,w,h);
/*定义canvas蒙版*/
ctx.fillStyle='#ddd';
ctx.fillRect(0,0,w,h);
var flag=false;
/*鼠标按下事件*/
canvas.addEventListener('mousedown',function(){
flag=true;
/*涂抹去蒙版*/
ctx.globalCompositeOperation='destination-out';
})
/*鼠标移动事件*/
canvas.addEventListener('mousemove',function(e){
if(flag){
var x= e.clientX-canvas.offsetLeft;
var y= e.clientY-canvas.offsetTop;
ctx.beginPath();
ctx.fillRect(x,y,30,30);
ctx.fill();
}
})
/*鼠标提起事件*/
canvas.addEventListener('mouseup',function(){
flag=false;
ctx.globalCompositeOperation='source-over';
})
</script>
</html>
欢迎分享本文，转载请保留出处：前端ABC » canvas实现刮刮乐效果