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

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

  ▲

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

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

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

  首先要实例化这个画布

  [] view

$(  
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，负数值将会被忽略  
} 
);

  上面的结果你可以得到一个大致的想法，就是可以认为是我们将来作画用的[画笔]5，canvas就是我们的画布。我们现在的画笔是2D的画笔，换句话说就是画平面几何的画笔。

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

  各种线

  [] view

$(
　　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);
![canvas时钟_canvas制作时钟_canvas画时钟][2]

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

  各种阴影

  [] view

$(
　　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();
　　}
![canvas画时钟_canvas时钟_canvas制作时钟][3]

　　);

  各种线∠连接

  [] view

$(
　　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的限定

  [] view

  文章转载请注明来源。新辉网主页 > 网页基础 > HTML >

  标题：HTML5的绝活:巧用Canvas制作会动的时钟（一）(4)

  地址：

  关键词：HTML5,绝活,巧用,Canvas,制作,会