初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。
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;
写间歇调用函数。表盘和刻度是静态的,指针是动态的,每秒需要刷新重画,所以代码应该是这样:
setInterval(function () {
context.clearRect(0, 0, width, height); // 清空画布所有内容
context.save();
context.translate(width / 2, height / 2); //将画布中心设为原点
drawStatic();
drawDynamic();
context.restore();
}, 1000);
写绘制静态表盘函数。由于内表盘和外表盘还有刻度都是圆,所以可以最后重构成一个函数。
function drawStatic() {
// 外圆
drawCircle(1, "#000000", "rgba(0, 0, 0, 0)", 0, 0, r * 0.9);
// 内圆
drawCircle(1, "#000000", "rgba(0, 0, 0, 0)", 0, 0, r * 0.87);
// 刻度点12
drawCircle(1, "#000000", "#000000", 0, -r * 0.80, 2);
// 刻度点6
drawCircle(1, "#000000", "#000000", 0, r * 0.80, 2);
// 刻度点3
drawCircle(1, "#000000", "#000000", r * 0.80, 0, 2);
// 刻度点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();
}
绘制指针。绘制时针的位置,需要知道是几小时几分,最终都转换成小时,然后计算相应的旋转弧度,绘制分针的位置,需要知道几分几秒,最终都转换成分针,计算相应的弧度,所以也可以重构成同一个函数,只是最终转换的和分度值以及对指针的外观设置不同。
function drawDynamic() {
var now = new Date();
// 时针
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,钟表绘制完成。