使用HTML5的canvas做一个会动的时钟

HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。

我们做所有的画之情需要一个画布，html的canvas标签就是帮我们声明了一个画布。

<canvasid="mycanvas">
</canvas>

这个默认的画布的大小是300*150，接下来的工作大多就是javaScript来做了。

首先要实例化这个画布

$(
function(){
varcanvas=document.getElementById("mycanvas");
$.log(canvas.width);
$.log(canvas.height);
varcontext=canvas.getContext("2d");
$.log(context.canvas);
$.log(context.fillStyle);//要填充的区域的颜色
$.log(context.strokeStyle);//要绘制的线条的颜色
$.log(context.lineCap);//笔帽样式
$.log(context.lineJoin);//两条连续线段的连接样式
$.log(context.lineWidth);//线段的宽度
$.log(context.miterLimit);//斜联接
$.log(context.shadowColor);//阴影的颜色，默认为#000000，
$.log(context.shadowOffsetX);//阴影在x方向上的偏移量，默认为0，不受坐标转换的影响。
$.log(context.shadowOffsetY);//阴影在y方向上的偏移量，默认为0，不受坐标转换的影响。
$.log(context.shadowBlur);//阴影的模糊度，默认为0，负数值将会被忽略
}
);

上面的结果你可以得到一个大致的想法，就是content可以认为是我们将来作画用的画笔（估计有专业人士对强烈抗议，我直接忽略），canvas就是我们的画布。我们现在的画笔是2D的画笔，换句话说就是画平面几何的画笔。

接下来，就是我们利用这个画笔来学习怎么画了

各种线

$(
function(){
varcanvas=document.getElementById("mycanvas");
varcontext=canvas.getContext("2d");
context.strokeStyle="rgb(255,0,0)";

context.beginPath();
context.lineCap="butt";//默认
context.lineWidth=10;
context.moveTo(10,10);
context.lineTo(100,10);//简单的一条线
context.stroke();//该方法真正在画布上绘制该线段

context.beginPath();
context.lineCap="round";//圆形线头
context.moveTo(10,30);
context.lineTo(100,30);
context.stroke();//该方法真正在画布上绘制该线段

context.beginPath();
context.lineCap="square";//方形线头
context.moveTo(10,50);
context.lineTo(100,50);
context.stroke();//该方法真正在画布上绘制该线段
}
);

各种阴影

$(
function(){
varcanvas=document.getElementById("mycanvas");
varcontext=canvas.getContext("2d");
context.strokeStyle="rgb(255,0,0)";
context.lineWidth=10;
context.shadowColor="#0000FF";

context.beginPath();
context.lineCap="round";
context.moveTo(10,10);
context.lineTo(100,10);
context.shadowOffsetX=10;
context.shadowBlur=10;
context.stroke();

context.beginPath();
context.lineCap="round";
context.moveTo(10,30);
context.lineTo(100,30);
context.shadowOffsetY=10;
context.shadowBlur=10;
context.stroke();

}
);

各种线∠连接

$(
function(){
varcanvas=document.getElementById("mycanvas");
varcontext=canvas.getContext("2d");
context.strokeStyle="rgb(255,0,0)";
context.lineWidth=10;
context.shadowColor="#0000FF";

context.beginPath();
context.lineJoin="miter";//两条线段的外边缘一直扩展到它们相交
context.moveTo(10,70);
context.lineTo(50,10);
context.lineTo(80,70);
context.stroke();

context.lineJoin="bevel";//以一个斜边进行连接
context.moveTo(100,70);
context.lineTo(140,10);
context.lineTo(180,70);
context.stroke();

context.lineJoin="round";//:以一个圆弧边进行连接
context.beginPath();
context.moveTo(200,70);
context.lineTo(240,10);
context.lineTo(280,70);
context.stroke();
context.closePath();//关闭path

}
);