使用HTML5 canvas绘制了一个时钟。
运行效果如下:
绘制的步骤如下所示:
- 创建一个canvas标签,此标签本身并没有绘图功能,但它是绘图的容器。代码如下所示:
<canvas id="clock" width="500" height="500"></canvas>
- 绘制代码
我们的目标是,提供一个独立的时钟绘制功能,即提供一个Clock的类,通过new创建一个时钟实例,就可以绘制一个完整的时钟表盘。例如:
var clock = new Clock("clock", 200); //"clock"是canvas的id, 200是整个表盘的大小,后面的指钟刻度均以此值自行调整
clock.start(); //开始绘制
Clock类的定义如下:
function Clock(canvasId, size) {
var canvas = document.getElementById(canvasId); //获取canvas对象
var imgData = null; //用于保存绘制好的表盘刻度
var context = null; //保存context绘图对象
var radius = size / 2; //钟表的半径
this.start = function () {
if (canvas.getContext) { //测试是否支持绘图
init(); //绘制表盘
drawPointers(); //立刻绘制指针
setInterval(drawPointers, 10); //每隔10毫秒绘制一次指针
} else {
console.log("浏览器不支持canvas绘图");
}
};
//....其它方法
}
init方法,绘制表盘刻度,代码如下:
function init() {
context = canvas.getContext("2d");
//以下3句,可以绘制表盘的圆圈
//context.beginPath();
//context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
//context.stroke();
//绘制60个刻度
for (var i = 0; i < 60; i++) {
var arc = i * 6 / 360 * 2 * Math.PI;
var lineWidth = "1";
var length = size * 0.01;
if (i % 5 == 0) { //其中每隔5个刻度,刻度线条要粗一个像素
lineWidth = "2";
length = size * 0.02;
}
context.beginPath();
context.lineWidth = lineWidth;
context.moveTo(Math.cos(arc) * (radius - length) + radius, Math.sin(arc) * (radius - length) + radius);
context.lineTo(Math.cos(arc) * radius + radius, Math.sin(arc) * radius + radius);
context.stroke();
}
//将绘制好的表盘保存起来
imgData = context.getImageData(0, 0, size, size);
}
drawPointers方法,同时绘制时钟、分钟和秒针
function drawPointers() {
context.putImageData(imgData, 0, 0); //恢复表盘数据到当前canvas,即覆盖掉上一次绘制的指针
var ms = getDateByMilliseconds(); //获取以毫秒为单位的当前时间
//秒针、分针和时针的绘制参数
//其中的p指的是该指针转一圈需要的毫秒数量
var configs = [
{ p: 60000, width: "1", style: "rgba(0,0,255)", length: radius * 0.8 },
{ p: 60000 * 60, width: "2", style: "rgba(100,0,255)", length: radius * 0.6 },
{ p: 1000 * 60 * 60 * 12, width: "4", style: "rgba(100,200,255)", length: radius * 0.5 },
];
configs.forEach(function (c) {
var sArc = (ms / c.p) * 2 * Math.PI - Math.PI / 2;
context.beginPath();
context.lineWidth = c.width;
context.moveTo(radius, radius);
context.lineTo(Math.cos(sArc) * c.length + radius, Math.sin(sArc) * c.length + radius);
context.strokeStyle = c.style;
context.stroke();
});
}
getDateByMilliseconds,返回以毫秒为单为的当前时间:
function getDateByMilliseconds() {
var now = new Date();
var hours = now.getHours() * 3600 * 1000;
var minutes = now.getMinutes() * 60 * 1000;
var seconds = now.getSeconds() * 1000;
return hours + minutes + seconds + now.getMilliseconds();
}
最后附上完整的代码:
function Clock(canvasId, size) {
var canvas = document.getElementById(canvasId);
var imgData = null;
var context = null;
var radius = size / 2;
this.start = function () {
if (canvas.getContext) {
init();
drawPointers();
setInterval(drawPointers, 10);
} else {
console.log("浏览器不支持canvas绘图");
}
};
function init() {
context = canvas.getContext("2d");
//context.beginPath();
//context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
//context.stroke();
for (var i = 0; i < 60; i++) {
var arc = i * 6 / 360 * 2 * Math.PI;
var lineWidth = "1";
var length = size * 0.01;
if (i % 5 == 0) {
lineWidth = "2";
length = size * 0.02;
}
context.beginPath();
context.lineWidth = lineWidth;
context.moveTo(Math.cos(arc) * (radius - length) + radius, Math.sin(arc) * (radius - length) + radius);
context.lineTo(Math.cos(arc) * radius + radius, Math.sin(arc) * radius + radius);
context.stroke();
}
imgData = context.getImageData(0, 0, size, size);
}
function drawPointers() {
context.putImageData(imgData, 0, 0);
var ms = getDateByMilliseconds();
var configs = [
{ p: 60000, width: "1", style: "rgba(0,0,255)", length: radius * 0.8 },
{ p: 60000 * 60, width: "2", style: "rgba(100,0,255)", length: radius * 0.6 },
{ p: 1000 * 60 * 60 * 12, width: "4", style: "rgba(100,200,255)", length: radius * 0.5 },
];
configs.forEach(function (c) {
var sArc = (ms / c.p) * 2 * Math.PI - Math.PI / 2;
context.beginPath();
context.lineWidth = c.width;
context.moveTo(radius, radius);
context.lineTo(Math.cos(sArc) * c.length + radius, Math.sin(sArc) * c.length + radius);
context.strokeStyle = c.style;
context.stroke();
});
}
function getDateByMilliseconds() {
var now = new Date();
var hours = now.getHours() * 3600 * 1000;
var minutes = now.getMinutes() * 60 * 1000;
var seconds = now.getSeconds() * 1000;
return hours + minutes + seconds + now.getMilliseconds();
}
}
var clock = new Clock("clock", 200);
clock.start();