css3-canvas 畫一個動態機械錶
阿新 • • 發佈：2018-12-11
style樣式
<style>
canvas{
border: 1px solid red;
}
</style>
html樣式
<body>
<canvas id="can" width="500" height="500"></canvas>
</body>
script樣式
<script> var can = document.getElementById('can'); var cx = can.getContext('2d'); var r = can.width/2; // 重置原點 cx.translate(r,r); setInterval(function () { // 清空前面所畫的東西 (基點x,基點y,寬,高) cx.clearRect(-r,-r,2*r,2*r); // 畫圓圈 cx.beginPath(); cx.arc(0,0,r-2,0,2*Math.PI); // (原點x，原點y，半徑，0度，2π度) cx.lineWidth = 3; // 線條的寬度 cx.stroke(); for (var i=0; i<60; i++){ cx.rotate(Math.PI/30); // 旋轉的角度 2π/60 // 畫刻度 cx.beginPath(); cx.moveTo(r-20,0); cx.lineTo(r-2,0); cx.stroke(); } for (var i=0; i<12; i++){ cx.rotate(Math.PI/6); // 畫12個刻度 cx.beginPath(); cx.lineWidth = 5; cx.moveTo(r-30,0); cx.lineTo(r-2,0); cx.stroke(); } //畫數字 for (var i=1; i<=12; i++){ cx.beginPath(); cx.font = '24px 微軟雅黑'; cx.textBaseline = 'middle'; // 垂直居中 cx.textAlign = 'center'; // 水平居中 cx.fillText(i,(r-45)*Math.sin(Math.PI/6 * i),-(r-45)*Math.cos(Math.PI/6 * i)); // (數值，x，y) cx.stroke(); } // 獲取時間 var date = new Date(); var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); // 畫時針 cx.save(); // 與後面的restore配對，防止裡面的設定影響到外面 cx.beginPath(); cx.rotate(Math.PI/6 * (hour + min/60 + sec/3600)); cx.moveTo(0,40); cx.lineTo(0,-100); cx.lineWidth = 8; cx.stroke(); cx.restore(); // 畫分針 cx.save(); cx.beginPath(); cx.rotate(Math.PI/30 * (min + sec/60)); cx.moveTo(0,50); cx.lineTo(0,-150); cx.lineWidth = 4; cx.stroke(); cx.restore(); // 畫秒針 cx.save(); cx.beginPath(); cx.rotate(Math.PI/30 * (sec)); cx.moveTo(0,60); cx.lineTo(0,-200); cx.lineWidth = 2; cx.strokeStyle = 'red'; cx.stroke(); cx.restore(); // 畫表盤中心點 cx.beginPath(); cx.arc(0,0,10,0,2*Math.PI); cx.fill(); },1000) </script>