6.HTML5 Canvas 绘图-2

<script>
var canvas=null;
var context=null;
window.onload=function(){
canvas=document.getElementById("drawCanvas");
context=canvas.getContext("2d");

context.beginPath();
context.moveTo(10,10);
context.lineTo(100,100);
context.strokeStyle="red";
context.lineWidth=20;
context.lineCap="butt";
context.stroke();
};

function startDrawing(){
context.beginPath();
context.moveTo(0,0);
}
function drawing(){
context.lineTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
context.stroke();
}
function clearCanvas(){
context.clearRect(0,0,canvas.width,canvas.height);
}
function saveImgFormCanvas(){
var img=document.getElementById("savedImageCopy");
img.src=canvas.toDataUrl();
}
</script>
<canvas id="drawCanvas"></canvas>
<img id="savedImageCopy"><br>