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中：

......
A drawing of something.

...... 

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

表.gif