用easyx画电子钟_Canvas入门－利用Canvas绘制好玩的电子时钟

在这之前

你需要了解一下方法的使用：

beginPath()

closePath()

moveTo()

lineTo()

fill()

stroke()

fillRect()

clearRect()

这些我在前面的文章介绍过，可以看：

画个圆

arc()方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)

= > 画一个以(x,y)为圆心的以radius为半径的圆弧(圆)，从startAngle开始到endAngle结束，按照anticlockwise给定的方向(默认为顺时针)来生成。

该方法有五个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

//画一个带边框的实心圆

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

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

canvas.width = 600;

canvas.height = 600;

ctx.beginPath();

var x = 200, // x 坐标值

y = 200, // y 坐标值

radius = 50, //半径

startAngle = 0 ; //开始点

endAngle = Math.PI * 2; //结束点

anticlockwise = true; //逆时针

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

ctx.lineWidth = 10;

ctx.fillStyle = "#1208ff";

ctx.strokeStyle = "#333";

ctx.stroke();

ctx.fill();

实现的效果图如下：

准备工作

会画个圆之后呢，就要开始绘制我们的电子时钟。开始之前，我们需要理清思路。首先，我们要创建个二维数组放置我们从0-9的点阵图形，当元素的值为1的时候，就要将其绘制出来。以下是二维数组的片段：

[

[0,0,1,1,1,0,0],

[0,1,1,0,1,1,0],

[1,1,0,0,0,1,1],

[1,1,0,0,0,1,1],

[1,1,0,0,0,1,1],

[1,1,0,0,0,1,1],

[1,1,0,0,0,1,1],

[1,1,0,0,0,1,1],

[0,1,1,0,1,1,0],

[0,0,1,1,1,0,