html5简单在线绘图,html5 canvas 简单绘图

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

function draw() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

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

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.beginPath();

ctx.arc(75,75,35,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

var draw_canvas = document.getElementById("draw");

var ctx1 = draw_canvas.getContext("2d");

draw_canvas.addEventListener("mouseup",onMouseUp,false);

draw_canvas.addEventListener("mousedown",onMouseDown,false);

var line_x = new Array();

var line_y = new Array();

var index = 0;

function onMouseUp(event){

draw_canvas.removeEventListener("mousemove",onMouseMove);

//ctx1.beginPath();

ctx1.moveTo(line_x[0],line_y[0]);

for(var i = 1; i

ctx1.lineTo(line_x[i],line_y[i]);

}

ctx1.stroke();

ctx1.restore();

line_x = new Array();

line_y = new Array();

index = 0;

}

function onMouseMove(event){

line_x[index] = event.pageX-150;

line_y[index] = event.pageY;

index++;

if(index > 4){

//ctx1.beginPath();

ctx1.moveTo(line_x[0],line_y[0]);

for(var i = 1; i

ctx1.lineTo(line_x[i],line_y[i]);

}

ctx1.stroke();

ctx1.restore();

/*

index = 0; */

line_x = new Array();

line_y = new Array();

}

}

function onMouseDown(event){

draw_canvas.addEventListener("mousemove",onMouseMove,false);

ctx1.width = 50;

ctx1.fillStyle = "rgb(200,0,0)";

line_x[index] = event.pageX-150;

line_y[index] = event.pageY;

index++;

ctx1.moveTo(event.pageX-150,event.pageY);

}

}