本文为归档内容,原始地址在 博客园.

关键词:HTML5, canvas, 时钟, 入门


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


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

时钟设计


1. Design:


时钟


2. colors:


    表盘:#ABCDEF    dialColor


    秒钟:red        sColor


    秒钟原点: gray     sDotColor


3. size:


    画布:400400     panel


    表盘:R = 160      dialR


    时针刻度:57     hW hH


    分针刻度:53     mW mH


    时针:10130     hHW hHH


    分针:5147       mHW mHH


    秒钟:3160       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