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

yibin 2015-02-09 建站源码 543

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


  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

  

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询