Canvas实现简单刮刮乐效果

2019独角兽企业重金招聘Python工程师标准>>>

html

<canvas width="480" height="670" id="myCanvas" ></canvas>

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;
				}

转载于:https://my.oschina.net/u/2255569/blog/662483