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