當前位置：
首頁 >
canvas 画布绘制时钟
發布時間：2024/3/24
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
canvas 画布绘制时钟
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
利用canvas繪制時鐘的一個小demo?
?
<!--* @Author: 164591357@qq.com 164591357@qq.com* @Date: 2022-08-06 11:04:07* @LastEditors: 164591357@qq.com 164591357@qq.com* @LastEditTime: 2022-08-07 15:56:21* @FilePath: \canvas\clock-canvas.html* @Description: 這是默認設置,請設置`customMade`, 打開koroFileHeader查看配置 進行設置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --><!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笔试题,[考试中心]