骰子 << Previous Next >> 期中操作影片
繪圖

<p><canvas height="300" id="canvas" width="400"> Your browser doesn't support the HTML5 element canvas. </canvas></p>
<script>// <![CDATA[
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
 
function draw(){
 ctx.beginPath();
 ctx.strokeStyle = "rgb(200,0,0)";
 ctx.arc(200, 200,50,0,2*Math.PI, false);
 ctx.closePath();
 ctx.stroke();
}
 
function clear_canvas(){
// Store the current transformation matrix
// The save() method pushes the current state onto the stack..
ctx.save();
 
// Use the identity matrix while clearing the canvas
// the setTransform() method lets you scale, rotate, move, and skew the current context.
// setTransform(Horizontal scaling, Horizontal skewing,Vertical skewing, Vertical scaling, Horizontal moving, Vertical moving)
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
// The restore() method pops the top state on the stack, restoring the context to that state.
ctx.restore();
}
// ]]></script>
<p><button onclick="draw()">繪圖</button> <button onclick="clear_canvas()">清除</button></p>
骰子 << Previous Next >> 期中操作影片