Canvas画钟
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
效果圖：
canvas代碼：
<body><canvas id="clock" width="500" height="500">您的破瀏覽器不支持canvas標簽。</canvas> </body> javascript代碼： <script>var clock=document.getElementById('clock');var cxt=clock.getContext('2d');function drawClock(){cxt.clearRect(0,0,500,500); //清除畫布var now=new Date();var second=now.getSeconds();var minute=now.getMinutes();var hour=now.getHours();hour=hour+minute/60; //使小時刻度更加精確//將24小時進制轉(zhuǎn)化為12小時制。hour=hour>12?hour-12:12;//表盤（藍色）cxt.lineWidth=10;cxt.strokeStyle="ABCDEF";cxt.beginPath();cxt.arc(250,250,200,0,360,false);cxt.closePath();cxt.stroke();//刻度for(var i=0;i<12;i++){ //時刻cxt.save(); //使用虛擬畫布cxt.lineWidth=7; //設(shè)置時針的粗細cxt.strokeStyle="#000";//設(shè)置顏色cxt.translate(250,250) //設(shè)置旋轉(zhuǎn)點。cxt.rotate(i*30*Math.PI/180); //設(shè)置旋轉(zhuǎn)角度。角度*Math.PI=弧度。cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,-190);cxt.stroke();cxt.restore(); //結(jié)束虛擬畫布}for(var i=0;i<60;i++){ //分刻度cxt.save(); //使用虛擬畫布cxt.lineWidth=5;cxt.translate(250,250); //設(shè)置旋轉(zhuǎn)點。cxt.rotate(i*6*Math.PI/180); //設(shè)置旋轉(zhuǎn)角度。角度*Math.PI=弧度。cxt.beginPath();cxt.moveTo(0,-180);cxt.lineTo(0,-190);cxt.stroke();cxt.closePath();cxt.restore(); //結(jié)束虛擬畫布}cxt.save(); //畫時刻針cxt.lineWidth=7;cxt.strokeStyle="#000";cxt.translate(250,250);cxt.rotate(hour*30*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-140);cxt.lineTo(0,10);cxt.stroke();cxt.closePath();cxt.restore();cxt.save();//畫分刻針cxt.lineWidth=5;cxt.strokeStyle="#000";cxt.translate(250,250);// cxt.rotate(180*Math.PI/180);cxt.rotate(minute*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-160);cxt.lineTo(0,15);cxt.closePath();cxt.stroke();cxt.restore();cxt.save()//畫秒刻針cxt.lineWidth=2;cxt.strokeStyle="red";cxt.translate(250,250);//cxt.rotate(330*Math.PI/180);cxt.rotate(second*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,19);cxt.closePath();cxt.stroke();cxt.beginPath(); //畫圓心的紅色圓圈點。cxt.arc(0,0,5,0,360,false);cxt.fillStyle="gray";cxt.fill();cxt.closePath();cxt.stroke();cxt.beginPath(); //畫秒鐘中的紅色圓圈點。cxt.arc(0,-150,5,0,360,false);cxt.fillStyle="gray";cxt.fill();cxt.closePath();cxt.stroke();cxt.restore();}//使用setInterval（代碼，毫秒）讓時鐘動起來。drawClock();setInterval(drawClock,1000); </script>轉(zhuǎn)載于:https://my.oschina.net/Akizi/blog/158352
總結(jié)
- 上一篇： GD32测量pwm波频率以及占空比
- 下一篇： 有占空比的c语言中断程序,如何用51程序