java刮刮乐,Canvas实现简单刮刮乐效果

html

js

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

var context=canvas.getContext("2d");

context.fillStyle="#ccc";

context.fillRect(112,337,257,128);

//填充文字

context.font = "30px 微软雅黑";

context.fillStyle="#000";

context.fillText("摩擦有惊喜",159,400);

//画线

drawOn=false;page_x=0;page_y=0;

canvas.onmousedown = function(e){

drawOn = true;

page_x = e.pageX-canvas.offsetLeft;

page_y = e.pageY-canvas.offsetTop;

context.lineCap = "round";

}

canvas.onmousemove = function(e){

if( drawOn ){

context.beginPath();

context.moveTo( page_x,page_y );

page_x = e.pageX-canvas.offsetLeft;

page_y = e.pageY-canvas.offsetTop

context.lineTo( page_x,page_y );

context.stroke();

context.globalCompositeOperation="destination-out"

context.lineWidth="20";

}

}

canvas.onmouseup = function(){

drawOn = false;

}