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，钟表绘制完成。
表.gif
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017年08月03日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
