关键词：HTML5， canvas， 时钟， 入门

学习内容：通过制作canvas时钟了解canvas主要方法的使用

DEMO：http://qianduannotes.sinaapp.com/test/canvas.html

时钟设计

1. Design：

时钟

2. colors：

    表盘：#ABCDEF　　　　dialColor

    秒钟：red　　　　　　　 sColor

    秒钟原点： gray　　　　 sDotColor

3. size：

    画布：400*400　　　　 panel

    表盘：R = 160　　　　  dialR

    时针刻度：5*7　　　　　hW hH

    分针刻度：5*3　　　　　mW mH

    时针：10*130　　　　　hHW hHH

    分针：5*147　　　　　  mHW mHH

    秒钟：3*160　　　　　  sHW sHH

　 秒钟原点：r = 5　　　　 sDotR

4. position

    表盘中心：200*200　　 dialT dialL

    秒钟原点中心： 120　　  sDotP

代码

var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');      //设置2D制图环境

function draw(){

//清楚画布
cxt.clearRect(0, 0, 400, 400);
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
//小时必须是浮点类型(小时+分数转换成小时)
hour = hour+min/60;
hour = hour>12?hour-12:hour;

//表盘
cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle = "#ABCDEF";
cxt.arc(200, 200, 160, 0, 360, false);
cxt.stroke();
cxt.closePath();
//刻度
//时刻度
for(var i = 0;i