初學(xué)JavaScript饿悬，用Canvas畫一個(gè)表（源代碼）。主要用到昨天學(xué)的間歇調(diào)用（setInterval）。
方法和屬性介紹
- context.beginPath()煞茫、context.closePath()：開始路徑和結(jié)束路徑。通俗講就像紙上畫畫的落筆和提筆摄凡。
- context.strokeStyle续徽、context.fillStyle：設(shè)置邊框顏色和填充顏色。
- context.arc(x,y,radius,startAngle,endAngle,anticlockwise)：畫一個(gè)圓亲澡。
- context.rotate(angle)：旋轉(zhuǎn)钦扭，弧度。
- context.translate(x, y)：將（x床绪，y）設(shè)為原點(diǎn)坐標(biāo)客情，即以（x，y）為基準(zhǔn)點(diǎn)癞己。
- context.moveTo(x,y)裹匙、 context.lineTo(x,y)：將筆移動(dòng)到（x，y）末秃，畫直線到（x概页，y）。
-
context.stroke()练慕、context.fill()：開始繪制邊框和繪制顏色惰匙。
上述方法和屬性加粗的是必用的，其余的可選铃将，根據(jù)需求看需要畫什么則用什么项鬼。 - setInterval = function(code,delay,arguments) {}：這個(gè)函數(shù)代表每隔幾秒運(yùn)行一次，見JavaScript概覽劲阎。
代碼解析
HTML中：
......
<canvas id="c" width="200" height="200">A drawing of something.</canvas>
<script src="js/clock2d.js"></script>
......
clock2d.js中：
聲明變量绘盟。
var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var r = width / 2;
寫間歇調(diào)用函數(shù)。表盤和刻度是靜態(tài)的，指針是動(dòng)態(tài)的龄毡，每秒需要刷新重畫吠卷，所以代碼應(yīng)該是這樣：
setInterval(function () {
context.clearRect(0, 0, width, height); // 清空畫布所有內(nèi)容
context.save();
context.translate(width / 2, height / 2); //將畫布中心設(shè)為原點(diǎn)
drawStatic();
drawDynamic();
context.restore();
}, 1000);
寫繪制靜態(tài)表盤函數(shù)。由于內(nèi)表盤和外表盤還有刻度都是圓沦零，所以可以最后重構(gòu)成一個(gè)函數(shù)祭隔。
function drawStatic() {
// 外圓
drawCircle(1, "#000000", "rgba(0, 0, 0, 0)", 0, 0, r * 0.9);
// 內(nèi)圓
drawCircle(1, "#000000", "rgba(0, 0, 0, 0)", 0, 0, r * 0.87);
// 刻度點(diǎn)12
drawCircle(1, "#000000", "#000000", 0, -r * 0.80, 2);
// 刻度點(diǎn)6
drawCircle(1, "#000000", "#000000", 0, r * 0.80, 2);
// 刻度點(diǎn)3
drawCircle(1, "#000000", "#000000", r * 0.80, 0, 2);
// 刻度點(diǎn)9
drawCircle(1, "#000000", "#000000", -r * 0.80, 0, 2);
}
function drawCircle(lineWidth, strokeColor, fillColor, x, y, radius) {
context.beginPath();
context.lineWidth = lineWidth;
context.strokeStyle = strokeColor;
context.fillStyle = fillColor;
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.stroke();
context.fill();
context.closePath();
}
繪制指針。繪制時(shí)針的位置路操，需要知道是幾小時(shí)幾分疾渴，最終都轉(zhuǎn)換成小時(shí)，然后計(jì)算相應(yīng)的旋轉(zhuǎn)弧度屯仗，繪制分針的位置搞坝，需要知道幾分幾秒，最終都轉(zhuǎn)換成分針魁袜，計(jì)算相應(yīng)的弧度瞄沙，所以也可以重構(gòu)成同一個(gè)函數(shù)，只是最終轉(zhuǎn)換的和分度值以及對(duì)指針的外觀設(shè)置不同慌核。
function drawDynamic() {
var now = new Date();
// 時(shí)針
drawNeedle(now.getHours(), now.getMinutes(), 12, r * 0.5, 3, "#000000");
// 分針
drawNeedle(now.getMinutes(), now.getSeconds(), 60, r * 0.65, 2, "#000000");
// 秒針
drawNeedle(now.getSeconds(), 0, 60, r * 0.7, 1, "#ff0a11");
}
function drawNeedle(final, rest, scale, length, width, color) {
final = final + rest / 60;
context.save();
context.beginPath();
context.rotate(2 * Math.PI / scale * final);
context.lineWidth = width;
context.strokeStyle = color;
context.moveTo(0, 0);
context.lineTo(0, -length);
context.stroke();
context.closePath();
context.restore();
}
OK，鐘表繪制完成申尼。
表.gif
