當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

canvas 画布绘制时钟

發布時間：2024/3/24 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 canvas 画布绘制时钟小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

利用canvas繪制時鐘的一個小demo?

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>時鐘</title> </head><body><canvas id="canvas" width="800" height="600"></canvas><script type="text/javascript">let canvas = document.querySelector('#canvas')let cxt = canvas.getContext('2d')function renderClock () {cxt.clearRect(0, 0, 800, 600)//清除畫布// 使用 save() 方法對當前畫布區域進行保存，并在以后的任意時間對其進行恢復（通過 restore() 方法）。cxt.save()//保留畫筆之前狀態// 將坐標移動到畫布的中央cxt.translate(400, 300)cxt.rotate(-2 * Math.PI / 4)//旋轉90度讓起始角，由原來的（弧的圓形的三點鐘位置是 0 度）改為12點位置cxt.save()/*** cxt.arc參數說明* x 坐標* 圓的中心的 y 坐標。* 圓的半徑。* 起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）* 結束角，以弧度計。* 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。*/// 創建圓繪制表盤cxt.beginPath()//開始路徑cxt.arc(0, 0, 200, 0, 2 * Math.PI)cxt.strokeStyle = "darkgrey"cxt.lineWidth = 10//圓的邊寬cxt.stroke()//實際地繪制出路徑。默認顏色是黑色。cxt.closePath()//結束路徑再畫刻度;不然會和圓粘在一起//分鐘for (let j = 0; j < 60; j++) {cxt.rotate(Math.PI / 30)// 轉6度cxt.beginPath()cxt.moveTo(180, 0)//x的刻度半徑是200所以可以從x為180,Y軸為0開始到200的位置畫個20長的刻度cxt.lineTo(190, 0)cxt.lineWidth = '2'cxt.strokeStyle = "orangered"cxt.stroke()cxt.closePath()}cxt.restore()cxt.save()// 繪制小時刻度for (let i = 0; i < 12; i++) {cxt.rotate(Math.PI / 6)//每次旋轉30度cxt.beginPath()cxt.moveTo(180, 0)//x的刻度半徑是200所以可以從x為180,Y軸為0開始到200的位置畫個20長的刻度cxt.lineTo(200, 0)cxt.lineWidth = 8//圓的邊寬cxt.strokeStyle = "darkgrey"cxt.stroke()cxt.closePath()}// 時間let time = new Date()let H = time.getHours()let M = time.getMinutes()let S = time.getSeconds()// 如果時間大于12就直接減去12 (如:當前為17點;那就是17-13=5點)H = H > 12 ? H - 12 : Hconsole.log('當前小時', H + ':' + M + ':' + S);cxt.beginPath()// 繪制秒針cxt.rotate(2 * Math.PI / 60 * S)//每秒旋轉的刻度乘以秒cxt.moveTo(-30, 0)//x的刻度半徑是200所以可以從x為180,Y軸為0開始到200的位置畫個20長的刻度cxt.lineTo(170, 0)cxt.lineWidth = 2//圓的邊寬cxt.strokeStyle = "red"cxt.stroke()cxt.closePath()cxt.restore()cxt.save()// 繪制分針cxt.beginPath()cxt.rotate(2 * Math.PI / 60 * M + 2 * Math.PI / 3600 * S)//每分針一圈360為一圈,一圈有60分鐘所以要除以60再乘以分鐘得到旋轉的角度,加上3600秒為一小時cxt.moveTo(-20, 0)//x的刻度半徑是200所以可以從x為180,Y軸為0開始到200的位置畫個20長的刻度cxt.lineTo(140, 0)cxt.lineWidth = 4//圓的邊寬cxt.strokeStyle = "darkblue"cxt.stroke()cxt.closePath()cxt.restore()cxt.save()// 繪制小時cxt.beginPath()cxt.rotate(2 * Math.PI / 12 * H + 2 * Math.PI / 60 / 12 * M + 2 * Math.PI / 12 / 60 / 60 * S)//一小時有12刻度,乘以當間小時+分鐘(一圈360度/60分鐘/12小時乘以當前的分鐘)+秒的算法最后得到每小時走的角度cxt.moveTo(-20, 0)//x的刻度半徑是200所以可以從x為180,Y軸為0開始到200的位置畫個20長的刻度cxt.lineTo(100, 0)cxt.lineWidth = 6//圓的邊寬cxt.strokeStyle = "darkslategray"cxt.beginPath()// 指針中心的小圓cxt.arc(0, 0, 8, 0, 2 * Math.PI)cxt.fillStyle = "deepskyblue"cxt.fill()cxt.restore()cxt.restore()//恢復到初始狀態}setInterval(() => {renderClock()}, 1000);</script> </body></html>

總結

以上是生活随笔為你收集整理的canvas 画布绘制时钟的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Imagination的IMG CXT
下一篇：安徽省计算机二级VB笔试题,[考试中心]