这次我通过用Canvas实现一个时钟来，学习Canvas绘图的基本API和用法，对于例子里面用到的每一个API，我都会详细的列出它的用法。
首先来看一下绘制完成后的效果图
时钟.PNG
这个时钟可以通过调整画布的宽高来增大和缩小，效果不会有改变。
绘制的基本思路是
- 时钟背景图的绘制
- 时针、分针、秒针、原点的绘制
- 让时针、分针、秒针动起来
时钟背景图的绘制
首先在HTML中定义一个宽高为400的画布Canvas
<div>
<canvas id="clock" height="400" width="400"></canvas>
</div>
然后获取画布元素，定义画布的执行上下文ctx
/*获取画布元素*/
var dom = document.getElementById("clock");
/*获得2d执行环境*/
var ctx = dom.getContext('2d');
获取画布的宽高,以及定义时钟的半径
/*定义半径为宽度的一半*/
var r = width/2;
/*缩放比例*/
var rem = width / 200;
接下来进行背景图的绘制，包括背景圆，12个数字，还有60个点的绘制，代码如下，注释已经详细说明了过程
/*画时钟的背景图*/
function drawBackground(){
/*一开始先把画布的初始状态保存下来*/
ctx.save();
/*将画布的中心原点由(0,0)变成(r,r)*/
ctx.translate(r,r);
/*开始绘画*/
ctx.beginPath();
/*定义画笔的宽度*/
ctx.lineWidth = 10*rem;
/*绘制一个圆*/
ctx.arc(0,0,r-5*rem,0,2*Math.PI,false);
/*进行填充*/
ctx.stroke();
/*画时钟上的12个数字*/
var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];//12个小时数
ctx.font = 18*rem +'px Arial';//定义字体大小和样式
ctx.textAlign='center';//将文本内容居中对齐
ctx.textBaseline='middle';//将文本基线设置为中线
hourNumber.forEach(function(number,i){
var rad = 2*Math.PI/12*i;//每个数字的弧度
/*求出数字存放位置的x和y坐标*/
var x = Math.cos(rad)*(r - 30*rem);
var y = Math.sin(rad)*(r - 30*rem);
/*填充数字*/
ctx.fillText(number,x,y);
});
/*绘制60个点*/
for(var i=0;i<60;i++){
var rad = 2*Math.PI/60*i;
var x = Math.cos(rad)*(r-18*rem);
var y = Math.sin(rad)*(r-18*rem);
ctx.beginPath();
/*如果是小时数的位置就绘制成黑色*/
if(i % 5 === 0){
ctx.fillStyle = "#000";
ctx.arc(x,y,2*rem,0,2 * Math.PI,false);
}else{
ctx.fillStyle = "#ccc";
ctx.arc(x,y,2*rem,0,2 * Math.PI,false);
}
ctx.fill();
}
}
时针、分针、秒针、圆点的绘制
代码如下
function drawHour(hour,minute){
/*再次保存当前画布的状态*/
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2 * Math.PI / 12 /60 * minute;
ctx.rotate(rad+mrad);//旋转当前绘画
ctx.lineWidth = 6*rem;
ctx.lineCap = 'round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r/2);
ctx.stroke();
/*返回最近的一次SAVE的画布状态*/
ctx.restore();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3*rem;
ctx.lineCap = 'round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r + 40*rem);
ctx.stroke();
ctx.restore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle = "#c14543";
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-3,20*rem);
ctx.lineTo(3,20*rem);
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill();
ctx.restore();
}
function drawDot(){
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(0,0,3*rem,0,2*Math.PI,false);
ctx.fill();
}
让时钟动起来
function draw(){
/*动态改变的时候，每一次都要先将之前的矩形画布清除掉，然后重新绘制*/
ctx.clearRect(0,0,width,height);
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground(width);//背景
drawHour(hour,minute);//小时
drawMinute(minute);//分钟
drawSecond(second);//秒
drawDot();//中心原点
/*恢复到一开始save的那个画布状态，进行重新绘制*/
ctx.restore();
}
draw();
setInterval(draw,1000);
