<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html> <head> <script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"></script> <script type="text/javascript"> 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<line_x.length; 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<line_x.length; 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); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <canvas id="draw" width="500" height="500" style="border: 1px solid red;"></canvas> </body> </html>