三、canvas实现时钟完整代码

js完整代码： jQuery(function($){ function clock(){ var canvas= document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var date = new Date; ctx.lineCap = "round";//字体变圆角 ctx.clearRect(0,0,400,400);//不断清除画布 不断再执行刷新 ctx.save();//每多一个保存就必须在下面补上一个还原restore() ctx.translate(200, 200);//中心点转移 //画刻度线 for (var i = 0; i < 60; i++) { ctx.save(); ctx.beginPath(); var rotateD = i*Math.PI*2/60; ctx.rotate(rotateD); ctx.lineWidth = 4; ctx.moveTo(170,0); ctx.lineTo(160,0); ctx.stroke(); ctx.restore(); }; for (var i = 0; i < 12; i++) { ctx.save(); ctx.beginPath(); var rotateB = i*Math.PI*2/12; ctx.lineWidth = 6; ctx.rotate(rotateB); ctx.moveTo(170,0); ctx.lineTo(150,0); ctx.stroke(); ctx.restore(); }; //画时针 var rotateH = date.getHours()/12*Math.PI*2 + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2; ctx.save(); ctx.beginPath(); ctx.rotate(rotateH); ctx.lineWidth=12; ctx.moveTo(-12,0); ctx.lineTo(125,0); ctx.stroke(); ctx.restore(); //画分针 var rotateM = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2; ctx.save(); ctx.strokeStyle="red"; ctx.beginPath(); ctx.rotate(rotateM); ctx.lineWidth=9; ctx.moveTo(-12,0); ctx.lineTo(135,0); ctx.stroke(); ctx.restore(); //画秒针 var rotateS = date.getSeconds()/60*Math.PI*2 - Math.PI/2; ctx.save(); ctx.strokeStyle="red"; ctx.beginPath(); ctx.rotate(rotateS); ctx.lineWidth=6; ctx.moveTo(-16,0); ctx.lineTo(140,0); ctx.stroke(); //画中心圆点 ctx.fillStyle="red"; ctx.arc(0,0,10,0,2*Math.PI) ctx.closePath(); ctx.fill(); //画秒针圆圈头 ctx.strokeStyle="red"; ctx.moveTo(160,0); ctx.arc(150,0,8,0,2*Math.PI); ctx.stroke(); ctx.restore(); // 画clock的表盘 ctx.beginPath(); ctx.strokeStyle="blue"; ctx.lineWidth=10; ctx.arc(0,0,174,0,Math.PI*2); ctx.stroke(); ctx.restore(); window.requestAnimationFrame(clock); }; window.requestAnimationFrame(clock); });

分享给小伙伴们：

本文标签： canvas/">canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻