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

编程问答

第一个Canvas实例-钟表

發布時間：2024/4/11 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了第一个Canvas实例-钟表小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

說到HTML5，我們就要首先知道Canvas標簽，這個標簽定義了一塊畫布，所有圖形的畫面都要在這塊畫布上呈

現出來。其實光有Canvas是做不了任何事的，學過Windows的人都知道，在Windows里面繪圖要先得到一個設

備上下文DC，在Canvas里面繪圖同樣要得到一個渲染上下文，在HTML5中，我們的圖形并不是直接畫到屏幕上

的，而是先畫到一個上下文上，然后再刷新到屏幕上的。在Canvas中，我們通過語句getContext('2d')方法

返回一個CanvasRenderingContext2D對象，即渲染上下文對象，然后通過調用它的方法來實現Canvas繪圖。

Canvas實現模擬電子時鐘，代碼如下

clock.html

<!doctype html> <html><head></head><body><canvas id="clock" width="1350" height="620" style="background:black">你的瀏覽器不支持canvas標！</canvas><script src="clock.js"></script></body> </html>

clock.js

//獲取上下文文檔對象 var clock = document.getElementById('clock'); var cxt = clock.getContext('2d');//畫指針 function drawPointer(width, color, value, angle, startx, starty, endx, endy){cxt.save(); //先保存當前畫布cxt.lineWidth = width; //設置畫筆的寬度cxt.strokeStyle = color; //設置畫筆的顏色cxt.translate(550, 310); //重置異次元空間的原點坐標cxt.rotate(value * angle * Math.PI / 180); //設置旋轉的角度，參數是弧度cxt.beginPath();cxt.moveTo(startx, starty);cxt.lineTo(endx, endy);cxt.closePath(); //先閉合路徑，再畫線cxt.stroke(); //開始畫線cxt.restore(); //將旋轉后的線段返回給畫布 }//畫刻度 function drawScale(size, width, color, value, startx, starty, endx, endy){for(var i = 0; i < size; i++){drawPointer(width, color, value, i, startx, starty, endx, endy);} }//為表盤的中心填充顏色 function drawFill(){cxt.save();cxt.beginPath();cxt.arc(550, 310, 7, 0, 360, false);cxt.closePath();cxt.fillStyle = "red";cxt.fill();cxt.restore(); }//畫時鐘 function drawClock(){cxt.clearRect(0, 0, 1350, 620); //清空整個畫布var now = new Date(); //獲取系統時間，取出時,分,秒var sec = now.getSeconds();var min = now.getMinutes();var hour = now.getHours();min += sec / 60;hour += min / 60;if(hour > 12) hour -= 12;cxt.beginPath();cxt.lineWidth = 10;cxt.strokeStyle = "blue";cxt.arc(550, 310, 300, 0, 360, false);cxt.closePath();cxt.stroke();drawScale(12, 7, "pink", 30, 0, -280, 0, -260); //畫時刻度drawScale(60, 5, "pink", 6, 0, -280, 0, -270); //畫分刻度drawPointer(7, "purple", hour, 30, 0, 12, 0, -210); //畫時針drawPointer(5, "yellow", min, 6, 0, 15, 0, -240); //畫分針drawPointer(4, "red", sec, 6, 0, 17, 0, -250); //畫秒針//細化秒針,為秒針加箭頭drawPointer(3, "red", sec, 6, -7, -235, 0, -255);drawPointer(3, "red", sec, 6, 7, -235, 0, -255);drawFill(); }drawClock(); setInterval(drawClock, 1000); //setInterval()方法中表示每隔1000ms，就執行drawClock一次

運行結果：

總結

以上是生活随笔為你收集整理的第一个Canvas实例-钟表的全部內容，希望文章能夠幫你解決所遇到的問題。

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