<!doctype html>
您的浏覽器不支持canvas標簽
var clock = document.getElementById('clock'); var cxt = clock.getContext('2d'); // 表盤（藍色） cxt.beginPath(); cxt.lineWidth = 10; cxt.strokeStyle= "blue"; cxt.arc(250,250,200,0,360,false); cxt.stroke(); cxt.closePath(); // 刻度 // 時刻度開始 for(var i=0; i<12; i++) { cxt.save(); cxt.lineWidth = 7; cxt.strokeStyle = "#000"; cxt.translate(250,250); cxt.rotate(i*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } // 時刻度結束 // 分刻度開始 for(var i=0; i<60; i++) { cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle = "#000"; cxt.translate(250,250); cxt.rotate(i*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } // 分刻度結束 // 時針開始 cxt.save(); cxt.beginPath(); cxt.lineWidth = 7; cxt.strokeStyle = "#000"; cxt.translate(250,250); cxt.rotate(90*Math.PI/180); cxt.moveTo(0,-140); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restor(); // 時針結束 // 分針開始 cxt.save(); cxt.beginPath(); cxt.lineWidth = 5; cxt.strokeStyle = "#000"; cxt.translate(250,250); cxt.rotate(180*Math.PI/180); cxt.moveTo(0,-160); cxt.lineTo(0,15); cxt.stroke(); cxt.closePath(); cxt.restor(); // 分針結束
請各位老師幫忙看看，分針是復制時針的代碼後進行了修改，為什麼分針做不出來，請老師指教！非常感謝！
cxt.restor();應為cxt.restore();
