建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
canvas時鐘
一、canvas時鐘的創(chuàng)建與繪制
1、創(chuàng)建畫布
創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)和成都電信服務(wù)器托管的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗和案例。
我們需要在HTML文件中創(chuàng)建一個元素，并設(shè)置其寬度和高度，在JavaScript中獲取該元素的引用，以便我們可以在后續(xù)代碼中操作它。
Canvas Clock
2、繪制背景
接下來，我們需要繪制時鐘的背景，我們可以使用fillStyle屬性設(shè)置填充顏色，并使用fillRect方法繪制一個矩形。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
3、繪制刻度線
為了使時鐘看起來更真實，我們需要在時鐘的外圈上繪制刻度線，我們可以使用beginPath方法開始一個新的路徑，然后使用moveTo、lineTo和stroke方法繪制線條。
function drawScale() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(centerX, centerY) * 0.9;
const startAngle = Math.PI * (1 / 12); // 每隔30度繪制一條刻度線
const endAngle = startAngle + Math.PI * (6 / 12); // 從1點到7點的角度差為60度(360度/12小時)
ctx.beginPath();
for (let i = 0; i <= 12; i++) {
const angle = startAngle + Math.PI * (i / 12); // 每個刻度線的起始角度為30度的倍數(shù)
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
ctx.lineTo(x, y);
}
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.stroke();
}
4、繪制指針
現(xiàn)在我們可以開始繪制指針了，我們需要為每個指針定義一個變量，包括其當(dāng)前位置、長度、顏色等，我們可以使用beginPath、moveTo、lineTo和stroke方法繪制指針，我們需要更新指針的位置以使其保持在正確的位置。
function drawPointers() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(centerX, centerY) * 0.9;
function drawHourPointer() {
const hourAngle = (new Date()).getHours() * Math.PI * (1/12) + Math.PI * (5/12); // 以弧度表示當(dāng)前小時數(shù)對應(yīng)的角度
ctx.save(); // 為了避免重疊，我們需要保存當(dāng)前的繪圖狀態(tài)并重新設(shè)置坐標系和描邊樣式
ctx.translate(centerX, centerY); // 將坐標系移動到畫布中心，以便我們可以直接從畫布邊緣繪制指針
ctx.rotate(hourAngle); // 將坐標系旋轉(zhuǎn)到正確的角度，以便我們可以直接從畫布邊緣繪制指針
ctx.beginPath(); // 從畫布邊緣開始一個新的路徑，以便我們可以直接從畫布邊緣繪制指針
ctx.moveTo(0, radius); // 將指針移動到正確的位置，以便它指向正確的時間(這里我們假設(shè)指針始終指向12點)
ctx.lineTo(radius * Math.sin(hourAngle), radius * Math.cos(hourAngle)); // 根據(jù)當(dāng)前小時數(shù)計算指針應(yīng)該指向的位置，并繪制指針線段
ctx.strokeStyle = 'white'; // 根據(jù)當(dāng)前小時數(shù)設(shè)置指針的顏色(這里我們假設(shè)指針始終為白色)
ctx.lineWidth = radius * (1/6); // 根據(jù)當(dāng)前小時數(shù)設(shè)置指針的線寬(這里我們假設(shè)指針始終為半徑的1/6)
ctx.stroke(); // 在當(dāng)前坐標系下繪制指針線段并恢復(fù)之前保存的繪圖狀態(tài)和坐標系設(shè)置(如果有的話)
}
function drawMinutePointer() {
const minuteAngle = (new Date()).getMinutes() * Math.PI * (1/60) + Math.PI * (30/60); // 以弧度表示當(dāng)前分鐘數(shù)對應(yīng)的角度
ctx.save(); // 為了避免重疊，我們需要保存當(dāng)前的繪圖狀態(tài)并重新設(shè)置坐標系和描邊樣式
ctx.translate(centerX, centerY); // 將坐標系移動到畫布中心，以便我們可以直接從畫布邊緣繪制指針
ctx.rotate(minuteAngle); // 將坐標系旋轉(zhuǎn)到正確的角度，以便我們可以直接從畫布邊緣繪制指針
ctx.beginPath(); // 從畫布邊緣開始一個新的路徑，以便我們可以直接從畫布邊緣繪制指針
ctx.moveTo(radius * Math.sin(minuteAngle), radius * Math.cos(minuteAngle)); // 根據(jù)當(dāng)前分鐘數(shù)計算指針應(yīng)該指向的位置，并繪制指針線段
ctx.strokeStyle = 'blue'; // 根據(jù)當(dāng)前分鐘數(shù)設(shè)置指針的顏色(這里我們假設(shè)指針始終為藍色)
ctx.lineWidth = radius * (1/30); // 根據(jù)當(dāng)前分鐘數(shù)設(shè)置指針的線寬(這里我們假設(shè)指針始終為半徑的1/30)
ctx.stroke(); // 在當(dāng)前坐標系下繪制指針線段并恢復(fù)之前保存的繪圖狀態(tài)和坐標系設(shè)置(如果有的話)
}
}
文章標題：canvas時鐘
網(wǎng)頁地址：http://m.fisionsoft.com.cn/article/dpohsgs.html
