2 xidaojia xidaojia 于 2016.01.18 19:52 提问

用<canvas>做钟表的问题

<!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(); // 分针结束



请各位老师帮忙看看,分针是复制时针的代码后进行了修改,为什么分针做不出来,请老师指教!非常感谢!

3个回答

xidaojia
xidaojia   2016.01.18 21:43
已采纳

cxt.restor();应为cxt.restore();

xidaojia
xidaojia   2016.01.18 21:42

cxt.restor();应为cxt.testore();

caozhy
caozhy   Ds   Rxr 2016.01.18 19:56

你的思路错了,你让画布旋转,画出了时钟,但是再话分钟就穿帮了。你应该算出角度,然后画线实现。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!