下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML><HTML><head><script type="text/JavaScript">function init(){ clock(); setInterval(clock,1000); } function clock(){ var Now = new Date(); var ctx = document.getElementByID('canvas').getContext('2d'); ctx.save(); ctx.clearRect(0,150,150); ctx.translate(75,75); ctx.scale(0.4,0.4); ctx.rotate(-Math.PI/2); ctx.strokeStyle = "black"; ctx.fillStyle = "white"; ctx.linewidth = 8; ctx.lineCap = "round"; // Hour marks ctx.save(); for (var i=0;i<12;i++){ ctx.beginPath(); ctx.rotate(Math.PI/6); ctx.moveto(100,0); ctx.lineto(120,0); ctx.stroke(); } ctx.restore(); // Minute marks ctx.save(); ctx.linewidth = 5; for (i=0;i<60;i++){ if (i%5!=0) { ctx.beginPath(); ctx.moveto(117,0); ctx.lineto(120,0); ctx.stroke(); } ctx.rotate(Math.PI/30); } ctx.restore(); var sec = Now.getSeconds(); var min = Now.getMinutes(); var hr = Now.getHours(); hr = hr>=12 ? hr-12 : hr; ctx.fillStyle = "black"; // write Hours ctx.save(); ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) ctx.linewidth = 14; ctx.beginPath(); ctx.moveto(-20,0); ctx.lineto(80,0); ctx.stroke(); ctx.restore(); // write Minutes ctx.save(); ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) ctx.linewidth = 10; ctx.beginPath(); ctx.moveto(-28,0); ctx.lineto(112,0); ctx.stroke(); ctx.restore(); // Write seconds ctx.save(); ctx.rotate(sec * Math.PI/30); ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.linewidth = 6; ctx.beginPath(); ctx.moveto(-30,0); ctx.lineto(83,0); ctx.stroke(); ctx.beginPath(); ctx.arc(0,10,Math.PI*2,true); ctx.fill(); ctx.beginPath(); ctx.arc(95,true); ctx.stroke(); ctx.fillStyle = "#555"; ctx.arc(0,3,true); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.linewidth = 14; ctx.strokeStyle = '#325FA2'; ctx.arc(0,142,true); ctx.stroke(); ctx.restore(); } </script> </head> <body onload="init();"> <canvas ID="canvas" wIDth="150" height="150"></canvas> </body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的HTML5元素Canvas实例之钟表全部内容，希望文章能够帮你解决HTML5元素Canvas实例之钟表所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）