文档介绍：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=, maximum-scale=, user-scalable=no" />
<title>时钟</title>
</head>
<!-- 在页面或图像加载完成后发生-->
<body onload="init()">
<canvas width="600" height="600" id="canvas"></canvas>
</body>
<script type="text/javascript">
var now; //当前时间
var ctx;//动画标签
var hour;//当前时间的小时值;
var minute;//当前时间的分钟值
var second;//当前时间的秒值
function init(){
// 画出时钟
clock();
// 让时钟动起来 setInterval(ame,delay)
//ame:调用的函数名 delay:调用函数的间隔,以毫秒计算。1000毫秒=1秒
setInterval(clock,1000);
}
// 画出时钟
function clock(){
//获取到当前的时间
//Date 对象自动使用当前的日期和时间作为其初始值。
now = new Date();
//获得动画标签 getContext()规定画面上的绘制环境,目前只有2d
ctx = ("canvas").getContext("2d");
//
//获取时钟的小时、分钟、秒的值
//now. 获取现在时间(小时、分钟、秒)整数
hour = ();
minute = ();
second = ();
//开始画 save()保存当前图像的状态
(); //保存之前状态,同时将保存后的状态画笔位置重置
initJob();//1、初始化操作
drawBorder();//2、画时钟外框
hourScale();//3、小时刻度
minuteScale();//4、分钟刻度
hourNeedle();//5、时针
minuteNeedle();//6、分针
secondNeedle();//7、秒针
();//结束 restore()画完,将画笔状态还原
}
//初始化操作
function initJob(){
//clearRect() 方法删除一个画布的矩形区域。
(0,0,600,600);//这里主要为了删除指针区域
(300,300); //指针偏移位置,默认从0,0 处开始
(,); //缩放比例
= "round";//刻度样式