用Canvas繪制一個鐘表
阿新 • • 發佈：2017-09-24
es2017 wid 畫布 text ges save 需要 als 分鐘
效果圖：
<html> <head></head>
<body> <canvas id="canvas1"height="500px"width="500px">您的瀏覽器不支持canvas標簽。</canvas> <script> var c=document.getElementById("canvas1"); var clock=c.getContext("2d"); function drawclock(){ //清除畫布，每畫一次就要清除上一次的 clock.clearRect(0,0,500,500);var now=new Date(); var sec=now.getSeconds(); var min=now.getMinutes(); var hour=now.getHours(); //小時必須獲取浮點類型（小時+分鐘轉換成的小時） hour=hour+min/60; //獲取的時間為24小時的（），需要轉換為12小時的（小時） hour=hour>12?hour-12:hour;//hour是否大於12，如果大於則hour=hour-12否則hour=hour。 //表盤 clock.lineWidth=10; clock.strokeStyle="#41216e"; clock.beginPath(); clock.arc(250,250,100,0,360,false); clock.closePath(); clock.stroke(); //時刻度,12個，所以用for循環來畫 for(var i=0;i<12;i++){ clock.save(); clock.lineWidth=6; clock.strokeStyle="#6f3a81"; //先設置（0，0）點 clock.translate(250,250);//再設置旋轉角度 clock.rotate(i*30*Math.PI/180); clock.beginPath(); clock.moveTo(0,-93); clock.lineTo(0,-80); clock.stroke(); clock.closePath(); clock.restore(); } //分刻度 for(var j=0;j<60;j++){ clock.save(); clock.lineWidth=4; clock.strokeStyle="#6f3a81"; clock.translate(250,250); clock.rotate(j*6*Math.PI/180); clock.beginPath(); clock.moveTo(0,-93); clock.lineTo(0,-85); clock.stroke(); clock.closePath(); clock.restore(); } //時針 clock.save(); clock.lineWidth=6; clock.strokeStyle="#170523"; clock.translate(250,250); clock.rotate(hour*30*Math.PI/180); clock.beginPath(); clock.moveTo(0,-40); clock.lineTo(0,10); clock.lineCap="round"; clock.closePath(); clock.stroke(); clock.restore(); //分針 clock.save(); clock.lineWidth=4; clock.strokeStyle="#170523"; clock.translate(250,250); clock.rotate(min*6*Math.PI/180); clock.beginPath(); clock.moveTo(0,-58); clock.lineTo(0,15); clock.closePath(); clock.stroke(); clock.restore(); //秒針 clock.save(); clock.lineWidth=2; clock.strokeStyle="#c582ba"; clock.translate(250,250); clock.rotate(sec*6*Math.PI/180); clock.beginPath(); clock.moveTo(-70,0); clock.lineTo(16,0); clock.stroke(); clock.closePath(); //畫出時針，分針，秒針的交叉點 clock.beginPath(); clock.fillStyle="black"; clock.arc(0,0,5,0,360); clock.arc(-60,0,2.5,0,360); clock.fill(); clock.closePath(); clock.stroke(); clock.restore(); } //使用setInterval一秒鐘調用一次 setInterval(drawclock,1000); </body> </script> </html>
用Canvas繪制一個鐘表