var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.lineWidth=5;cxt.strokeStyle="#000000";cxt.lock=false;$("#myCanvas").mousedown(function(e) {cxt.beginPath();//清空子路径cxt.lock=true;var mousePos = getMousePos(c, e);cxt.moveTo(mousePos.x,mousePos.y);this.setCapture && this.setCapture();return false;// document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";});document.onmousemove = function(e) {if(cxt.lock){var mousePos = getMousePos(c, e);var x=mousePos.x;var y=mousePos.y;cxt.lineTo(x,y);cxt.stroke();return false;}}$("body").mouseup(function(e) {cxt.lock=false;cxt.closePath() ;//闭合路径return true;// document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";});$("#submitimage").click(function(){$("#imageurl").val(c.toDataURL());});//canvas鼠标定位function getMousePos(canvas, evt) {var rect = canvas.getBoundingClientRect();return {x: evt.clientX - rect.left * (canvas.width / rect.width),y: evt.clientY - rect.top * (canvas.height / rect.height)}}//颜色赋值var color = new Array("#000000","#0066FF","#6600FF","#993366","#33CC66","#FF3300");for(var i=0; $("#selectcolor li").eq(i).val()==0;i++){$("#selectcolor li").eq(i).css("background-color",color[i]);}//颜色选取$("#selectcolor li").click(function(){cxt.strokeStyle=$(this).css("backgroundColor");});//画笔大小$("#pensize li").click(function(){if($(this).text()=="细"){cxt.lineWidth=5;}else if($(this).text()=="中"){cxt.lineWidth=10;}else{cxt.lineWidth=15;}});$("#canvasreset").click(function(){cxt.clearRect(0, 0, c.width, c.height);//清除画布，左上角为起点});