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

这次我们的目标是画一个会和时间同步的时钟，不过没有美学感觉，样子丑的厉害。
HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。我们做所有的画之情需要一个画布，html的canvas标签就是帮我们声明了一个画布。

<canvas id="mycanvas">
</canvas>

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

$（
function（） {
var canvas = document.getElementById（"mycanvas"）;
$.log（canvas.width）;
$.log（canvas.height）;
var context = 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（） {
var canvas = document.getElementById（"mycanvas"）;
var context = 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（） {
var canvas = document.getElementById（"mycanvas"）;
var context = 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（） {
var canvas = document.getElementById（"mycanvas"）;
var context = 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
}
）;