关键词: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