}.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";
}