html5实现在线动态画板,HTML5 canvas实现一个简易画板

初学javascript，希望和大家交流。

首先创建一个canvas

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var cx = $('#myCanvas').offset().left;

var cy = $('#myCanvas').offset().top;

//初始化画板

var init = function(){

for(var x = 0.5 ; x < 500 ;x += 10){

cxt.moveTo(x,0);

cxt.lineTo(x,500);

}

for(var y = 0.5 ; y < 500 ;y += 10){

cxt.moveTo(0,y);

cxt.lineTo(500,y);

}

cxt.strokeStyle="#eee";

cxt.stroke();

}

init();

//上下文环境，用于记录鼠标的轨迹

var drawContext = function(x,y){

var end_x = 0;

var end_y = 0;

return function(x,y){

cxt.lineTo(x,y);

cxt.stroke();

end_x = x;

end_y = y;

cxt.moveTo(end_x,end_y);

}

}

var dc;

//每一次落笔(鼠标单击)都创建一个上下文环境

function pMoveTo(e){

e=e||window.event;

var _x = e.clientX - cx;

var _y = e.clientY - cy;

cxt.moveTo(_x,_y);

cxt.beginPath();

cxt.strokeStyle="red";

dc = drawContext(_x,_y);

}

//画画

function draw(e){

e=e||window.event;

var _x = e.clientX - cx;

var _y = e.clientY - cy;

if(dc){

dc(_x,_y);

}

}

//鼠标放开，则释放这次落笔

function cancel(){

if(dc){

dc = null;

}

else{

return;

}

}