炫意html5
最早CSS3和HTML5移动技术网站之一

HTML5实践之Canvas线条

    在HTML5中,其中最令开发者和用户值得留意的新特性,莫过于Canvas的功能了,它能在目前的IE 9,IE 10以及Chrome,FireFox等多种浏览器中使用,是目前HTML5中富客户端动画效果的实现方式,有了它,HTML5就有了跟Adobe Flash对抗的资本,用户以后只要使用支持HTML5的浏览器,就可以不用安装Flash插件了。本文学习下HTML5中的线条、文本及阴影效果。

    首先介绍的是线条,有如下的方法控制线条的相关属性:

  lineWidth [ = value ] 设置线条的宽度

  lineCap [ = value ] lineCap 属性指定线段如何结束。只有绘制较宽线段时,它才有效。可以有三个cap样式之一:对接、圆、方。除另有规定外,默认为对接。例子如下图:

 

在canvas中绘画文字

  lineJoin [ = value ] 设置路径的风格,路径可以有一个三线连接:尖角,圆角或斜角。如下图:

 

在canvas中绘画文字

  在画线时,可以调用moveTo和lineTo方法,它们接受传入X和Y坐标,以决定从哪里开始画线条,也可以同时设置lineWidth来设置线条宽度,最后调用stroke笔触去画线条。下面是一个例子:

for (i = 15; i > 0; i–) {
  context.strokeStyle = “blue”;
  context.lineWidth = i;
  context.beginPath();
  context.moveTo(55, 15 + (15 – i) * 24);
  context.lineTo(335, 15 + (15 – i) * 24);
  context.stroke();
  }

  效果是一个从粗到细的线条渐变,如下图

 

在canvas中绘画文字

  我们可以再设置线条两端的样式lineCap,比如

context.lineCap = “round”;

  则可以看到出现如下图的圆角效果图:

 

在canvas中绘画文字
 

转自:IT168

炫意HTML5 » HTML5实践之Canvas线条

(adsbygoogle = window.adsbygoogle || []).push({});
分享到:更多 ()

CSS3教程HTML5教程