柠檬铺

HTML5的绝活:巧用Canvas制作会动的时钟（一）

—

由

柠檬铺
于

这次我们的目标是画一个会和时间同步的时钟，不过没有美学感觉，样子丑的厉害。


▲

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

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

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

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

　　首先要实例化这个画布

[javascript] view plaincopy

$(
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的画笔，换句话说就是画平面几何的画笔。

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

　　各种线

[javascript] view plaincopy

　　

$(

　　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(); //该方法真正在画布上绘制该线段

　　}

　　);


　　各种阴影

　[javascript] view plaincopy

　　

$(

　　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();

　　}

　　);


　　各种线∠连接

　　[javascript] view plaincopy

　　

$(

　　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

　　}

　　);


　　mitre的限定

　　[javascript] view plaincopy