一、先来简单介绍画时钟需要的canvas知识

1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用。

HTML代码:

<canvas id="canvas" class="canvas" width="400" height="400" border:></canvas>

2.使用id寻找canvas元素,在js代码中使用document.getElementById()等方法获取id。

var canvas = document.getElementById("canvas");

 

3.通过canvas元素的getContext方法来获取其上下文(Context),即创建Context对象,以获取允许绘画的2D环境。

var ctx = canvas.getContext("2d");

4.先来认识一下canvas的绘制方法。

(1)绘制矩形的两种方法:fillRect 和 strokeRect

  前者用于绘制用颜色填充(fill)区域的矩形,后者用于绘制轮廊(stroke)或线条。图形指定颜色用到了两个属性,即fillStyle 和 strokeStyle,前者用于指定要