Canvas绘图——2d表

初学JavaScript，用Canvas画一个表。主要用到昨天学的间歇调用（setInterval）。

方法和属性介绍

• context.beginPath()、context.closePath()：开始路径和结束路径。通俗讲就像纸上画画的落笔和提笔。
• context.strokeStyle、context.fillStyle：设置边框颜色和填充颜色。
• context.arc(x,y,radius,startAngle,endAngle,anticlockwise)：画一个圆。
• context.rotate(angle)：旋转，弧度。
• context.translate(x, y)：将（x，y）设为原点坐标，即以（x，y）为基准点。
• context.moveTo(x,y)、 context.lineTo(x,y)：将笔移动到（x，y），画直线到（x，y）。
• context.stroke()、context.fill()：开始绘制边框和绘制颜色。
  上述方法和属性加粗的是必用的，其余的可选，根据需求看需要画什么则用什么。
• setInterval = function(code,delay,arguments) {}：这个函数代表每隔几秒运行一次，见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;

写间歇调用函数。表盘和刻度是静态的，指针是动态的，每秒需要刷新重画，所以代码应该是这样：

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，钟表绘制完成。