本文介绍如何使用HTML的canvas元素结合JavaScript绘制一个动态时钟，详细讲解了html和JavaScript的实现代码。
一、先看一下实现的结果
二、html部分
html部分只使用了画布元素<canvas>，具体代码如下：
<body>
<canvas id="diagonal" width="200" height="200"></canvas>
</body>
三、JavaScript部分
具体的时钟的绘制，以及时钟的动态效果都是由js实现的，具体代码如下：
var canvas;
function clock()
{
canvas = document.getElementById("diagonal");//获取画布
canvas.width=400;//设置画布的宽
canvas.height=400;//设置画布的高
var ctx = canvas.getContext('2d');//获取上下文，并指明绘制环境
if (ctx) {
var timerId;
var frameRate = 60;
function canvObject() {
this.x = 0;
this.y = 0;
this.rotation = 0;
this.borderWidth = 2;
this.borderColor = '#000000';//设置表盘的边界颜色
this.fill = false;
this.fillColor = '#F8F8FF';
this.update = function () {
//更新的函数
if (!this.ctx) throw new Error('你没有指定ctx对象。');
var ctx = this.ctx
ctx.save();
ctx.lineWidth = this.borderWidth;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.fillColor;
ctx.translate(this.x, this.y);//使用translate()函数实现秒针的移动
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
