绘制线条

管理员01  发布于:2014-11-23  浏览:

摘要:绘制线条与绘制圆或圆弧一样,也是使用路径。路径其实就是表示一系列的点,并在这些点之间用线条连接。在绘制圆时,使用了beginPath方法来开始一个路径,使用closePath来关闭路径,也称为封闭路径,一般是指将起始点和终止点连接起来形成一个封闭的形状。 绘制直线命名用moveTo和lineTo方法,这两个方法的语法如下所示。 moveTo(x,y):将光标移动到指定的坐标点,直线将以这个坐标点为起点。 lineTo(x,y):该方法在moveTo方法指定的起点与lineTo方法中指定的终点之间绘制一条直线。 除了绘制线条之外,还可以使用如下的几个方法来指定线条的样式。 lineWidth属性:指定线条的宽度。 strokeStyle属性:设置或返回用于笔触的颜色、渐变或模式。它具有3种可选的属性值:color属性指定纯色轮廓;gradient指定用绘图填充的渐变对象;pattern指定用于绘制的图案笔触
  绘制线条与绘制圆或圆弧一样,也是使用路径。路径其实就是表示一系列的点,并在这些点之间用线条连接。在绘制圆时,使用了beginPath方法来开始一个路径,使用closePath来关闭路径,也称为封闭路径,一般是指将起始点和终止点连接起来形成一个封闭的形状。
  绘制直线命名用moveTo和lineTo方法,这两个方法的语法如下所示。
  moveTo(x,y):将光标移动到指定的坐标点,直线将以这个坐标点为起点。
  lineTo(x,y):该方法在moveTo方法指定的起点与lineTo方法中指定的终点之间绘 制一条直线。
   除了绘制线条之外,还可以使用如下的几个方法来指定线条的样式。
  lineWidth属性:指定线条的宽度。
  strokeStyle属性:设置或返回用于笔触的颜色、渐变或模式。它具有3种可选的属性值:color属性指定纯色轮廓;gradient指定用绘图填充的渐变对象;pattern指定用于绘制的图案笔触样式。
   lineCap属性:指定线段的末端如何绘制。它具有3种可选值:butt这个默认值指定线段没有线帽;found这个值指定线段应该有一个半圆形的线帽;square这个值表示线段应该有一个矩形的线帽。
  新建一个网页名为HTML5Dem012,html,在该网页中放置一个名为myCanvas的canvas元素,编写如代码11.16所示的代码来绘制直线:


  代码在画布上绘制了3种不同风格的直线,分别具有不同的线帽、填充和样式,代码的实现过程如以下步骤所示:
  (1)在页面上放了一个canvas元素,JavaScript将会在该画布上绘制直线。
  (2)第一个线条指定strokeStyle为一个颜色值,表示使用纯色进行填充,线帽为butt属性值,表示不使用线帽。
  (3)第二个线条指定strokeStyle也为一个颜色值,线帽为round,表示使用圆形线帽。
  (4)第三个线条的strokeStyle指定为使用createLinearGradient创建的渐变对象,这使得线条将用渐变色填充,同时指定lineCap为square表示指定了矩形的线帽。
  这个示例的运行效果如图11.24所示。


文章链接:http://www.jihai.com/a/jiaocheng/html5-css3/201411/879.html
标签:一样(2)或(3)绘制(10)与(43)
作者:管理员01 来源:未知 发布于2014-11-23 16:54
您可能喜欢的文章

热门模板
热门阅读
热门插件