基本思路：
首先绘制一个矩形背景，设置颜色为灰色。在背景上绘制一个简单的矩形外边框，然后再绘
制一个内边框，接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度，
绘制分钟刻度，最后获取当前系统时间，绘制时分秒三个手柄。
技术要点：
使用html5的canvas 2d绘制对象，主要使用context.save()与context.restore()方法来保存
绘制状态和重置绘制状态，使用transform和fillrect()方法来绘制时钟和分钟刻度。使用
drawimage()方法来绘制背景图片，使用settimeout()方法来刷新时间显示。
代码详解：
获取html5 canvas绘制对象的代码如下:
var canvas = document.getelementbyid("canvas1");
ctx = canvas.getcontext("2d");
ctx.clearrect(0, 0, 500, 500);
绘制时钟刻度的代码如下：
var sin = math.sin(math.pi/6);
var cos = math.cos(math.pi/6);
ctx.translate(245, 245);
for (var i=0; i <= 12; i++) {
// top
ctx.fillrect(160,-7.5,30,10);
ctx.strokerect(160,-7.5,30,10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
绘制分钟分钟刻度的代码如下：
var sin = math.sin(math.pi/30);
var cos = math.cos(math.pi/30);
for (var i=0; i <= 60; i++) {
ctx.fillrect(170,-5,10,2);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
保存制状态代码如下：
ctx.translate(245, 245);
ctx.save();
恢复绘制状态代码如下：
ctx.restore();
运行效果如下：
程序完全源代码如下：
<html>
<head>
<script>
window.onload = function() {
clockhand();
};
function clockhand() {
var canvas = document.getelementbyid("canvas1");
ctx = canvas.getcontext("2d");
ctx.clearrect(0, 0, 500, 500);
// create background rectangle
// ctx.linewidth = 10;
ctx.fillstyle = "gray";
ctx.fillrect(0,0,500,500);
// draw frame
ctx.linewidth = 10;
ctx.strokestyle = "green";
ctx.strokerect(0,0,500,500);
// draw author infomation
ctx.fillstyle = "blue";
ctx.font = "20px times new roman";
ctx.filltext("-created by gloomyfish", 150, 30);
// draw inner rectangle
ctx.linewidth = 10;
ctx.strokestyle = "black";
ctx.strokerect(45,45,400,400);
// create background image
var img=new image();
img.src="background.png";
img.onload = function() {
ctx.drawimage(img,45,45,400,400);
ctx.save();
// draw marker unit
ctx.linewidth = 2;
ctx.fillstyle = "purple";
ctx.strokestyle = "black";
var sin = math.sin(math.pi/6);
var cos = math.cos(math.pi/6);
ctx.translate(245, 245);
for (var i=0; i <= 12; i++) {
// top
ctx.fillrect(160,-7.5,30,10);
ctx.strokerect(160,-7.5,30,10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
// transform back center point
// ctx.translate(245, 245);
var sin = math.sin(math.pi/30);
var cos = math.cos(math.pi/30);
for (var i=0; i <= 60; i++) {
ctx.fillrect(170,-5,10,2);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.restore();
// top
ctx.filltext("12", 233,100);
// bottom
ctx.filltext("6", 240,400);
// left
ctx.filltext("9", 90,252);
// right
ctx.filltext("3", 395,250);
// get time
ctx.save();
ctx.translate(245, 245);
ctx.save();
// dynamic show time
var now=new date();
var hrs=now.gethours();
var min=now.getminutes();
var sec=now.getseconds();
//draw hour hand
ctx.rotate(math.pi/6*(hrs+(min/60)+(sec/3600)));
ctx.beginpath();
ctx.moveto(0,10);
ctx.lineto(0,-60);
ctx.stroke();
ctx.restore();
ctx.save();
//draw minute hand
ctx.rotate(math.pi/30*(min+(sec/60)));
ctx.beginpath();
ctx.moveto(0,20);
ctx.lineto(0,-110);
ctx.stroke();
ctx.restore();
ctx.save();
//draw second hand
ctx.rotate(math.pi/30*sec);
ctx.strokestyle="#e33";
ctx.linewidth = 2;
ctx.beginpath();
ctx.moveto(0,20);
ctx.lineto(0,-110);
ctx.stroke();
ctx.restore();
// finally store to originall point
ctx.restore();
settimeout(clockhand,1000);
};
}
</script>
</head>
<body bgcolor="#e6e6fa">
<canvas id="canvas1" width="500" height="500">electronic clock</canvas>
</body>
</html>
不足之处：
每次都刷新加载image对象不怎么好，我是在google浏览器中测试的，建议在
google浏览器中运行上面代码。
以上就是html5 组件canvas实现电子钟的图文代码详情介绍的内容。