<!doctype html>
canvas实例1-时钟
您的浏览器不支持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(); // 分针结束
请各位老师帮忙看看，分针是复制时针的代码后进行了修改，为什么分针做不出来，请老师指教！非常感谢！
