html用画布画图,HTML5入门十---Canvas画布实现画图（一）

}.ToolBar{float:left;font-family:"微软雅黑";font-size:14px;font-variant:small-caps;text-align:center;background:#F2F7EE;padding:10px 15px 3px 10px;margin-bottom:1px;margin-right:1px;border:1px solid #7B899B;

}.ToolBar button{padding:6px;margin:7px 2px;font-variant:normal;font-size:12px;

}canvas{border:1px solid #7B899B;

}img{padding:2px;border:2px solid #F2F7EE;

}img:hover{/*当鼠标悬停在图片上*/border:2px groove #E4F0FE;background:white;

}img.Selected{border:2px groove #E4F0FE;

}#saveCopyContainer{display:none;

}#saveCopyContainer img{width:250px;height:150px;

}.CanvasContainer{

}

varcanvas;varcontext;varisDrawing=false;

window.οnlοad=function(){

canvas=document.getElementById("drawingCanvas");

context=canvas.getContext("2d");

canvas.οnmοusedοwn=startDrawing;

canvas.οnmοuseup=stopDrawing;

canvas.οnmοuseοut=stopDrawing;

canvas.οnmοusemοve=draw;

}functionstartDrawing(e)

{

isDrawing= true;

context.beginPath();

context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);

}functionstopDrawing()

{

isDrawing=false;

}functiondraw(e)

{if(isDrawing)

{varx=e.pageX-canvas.offsetLeft;vary=e.pageY-canvas.offsetTop;

context.lineTo(x,y);

context.stroke();

}

}functionchangeColor(color,imgEle)

{

context.strokeStyle=color;

imgEle.className= "Selected";

}functionchangethickness(thickness,imgEle)

{

context.lineWidth=thickness;

imgEle.className= "Selected";

}functionclearCanvas(){

context.clearRect(0,0,canvas.width,canvas.height)

}functionsaveCanvas(){varimageCopy=document.getElementById("saveImageCopy");

imageCopy.src=canvas.toDataURL();varimageContainer=document.getElementById("saveCopyContainer");

imageContainer.style.display= "block";

}