基本思路：
首先绘制一个矩形背景，设置颜色为灰色。在背景上绘制一个简单的矩形外边框，然后再绘
制一个内边框，接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度，
绘制分钟刻度，最后获取当前系统时间，绘制时分秒三个手柄。
技术要点：
立即学习“前端免费学习笔记（深入）”；
使用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();
运行效果如下：
程序完全源代码如下：
不足之处：
每次都刷新加载image对象不怎么好，我是在google浏览器中测试的，建议在
google浏览器中运行上面代码。
以上就是HTML5 组件Canvas实现电子钟的图文代码详情介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！
