html 涂鸦功能，及传数据到后台

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);//清除画布，左上角为起点
});