[Web]Canvas手绘时钟
生活随笔
收集整理的這篇文章主要介紹了
[Web]Canvas手绘时钟
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這是一個(gè)手繪時(shí)鐘的案例，是不是很可愛(ài)呢！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>手繪時(shí)鐘</title><style type="text/css">#clockCanvas{background: url("image02.png") no-repeat center;}</style> </head> <body onload="drawClock()"> <h3>手繪時(shí)鐘</h3> <hr> <canvas id="clockCanvas" width="600" height="600" >對(duì)不起，您的服務(wù)器不支持HTML5畫(huà)布API。 </canvas> <script>var c = document.getElementById("clockCanvas");var ctx = c.getContext("2d");//繪制時(shí)鐘function drawClock() {//保存畫(huà)布的初始繪制狀態(tài)ctx.save();ctx.clearRect(0, 0, 600, 600);// 設(shè)置畫(huà)筆樣式和位置//設(shè)置畫(huà)布中心為參照點(diǎn)ctx.translate(300, 300);ctx.rotate(-Math.PI / 2);ctx.lineWidth = 6;ctx.lineCap = "round";// 畫(huà)12個(gè)刻度f(wàn)or (var i = 0; i < 12; i++){ctx.beginPath();ctx.rotate(Math.PI / 6);ctx.moveTo(210, 0);ctx.lineTo(240, 0);ctx.stroke();}// 畫(huà)60分鐘對(duì)應(yīng)的刻度ctx.lineWidth = 5;for (i = 0; i < 60; i ++){ctx.beginPath();ctx.moveTo(230, 0);ctx.lineTo(235,0);ctx.stroke();ctx.rotate(Math.PI / 30);}var now = new Date();var s = now.getSeconds();var m = now.getMinutes();var h = now.getHours();if (h > 12)h -= 12;//繪制時(shí)針ctx.save();ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);ctx.lineWidth = 12;ctx.beginPath();ctx.moveTo(-30, 0);ctx.lineTo(140, 0);ctx.stroke();ctx.restore();//繪制分鐘ctx.save();ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);ctx.strokeStyle = "black";ctx.lineWidth = 8;ctx.beginPath();ctx.moveTo(-30, 0);ctx.lineTo(200, 0);ctx.stroke();ctx.restore();//繪制秒針ctx.save();ctx.rotate(s * Math.PI / 30);ctx.strokeStyle = "red";ctx.lineWidth = 6;ctx.beginPath();ctx.moveTo(-40, 0);ctx.lineTo(250, 0);ctx.stroke();ctx.fillStyle = "red";ctx.beginPath();ctx.arc(0, 0, 10, 0, Math.PI * 2, true);ctx.fill();//恢復(fù)之前的繪圖樣式ctx.restore();//繪制表盤(pán)ctx.lineWidth = 12;ctx.strokeStyle = "#AEC5EB";ctx.beginPath();ctx.arc(0, 0, 270, 0, Math.PI * 2, true);ctx.stroke();ctx.restore();}setInterval("drawClock()", 1000); </script> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的[Web]Canvas手绘时钟的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用Python下载抖音无水印视频！
- 下一篇： 计算机对护理学的影响,浅析护理专业计算机