HTML5教程关于canvas的线条知识，可以这样总结方法

本文为兄弟连云课堂《HTML5教程canvas学习：线条知识总结》学习笔记 订阅走一波。

前言

初次学习HTML5绘图canvas线条部分内容，特写下本篇博文总结，以供今后可以复习使用。在本篇博文中，主要记录在实际使用中需要注意的事项，并记录一个由多个五角星组成的简单星云案例。本文中不对具体的API使用方法进行说明，需要查看用法请自行搜索。

canvas公共部分

HTML部分

HTML5中要使用canvas绘图，必须在HTML文件中使用<canvas>标签，不能换成其他标签。该标签中可以包含一个id或者class属性，也可以不包括，只要能在操作DOM时找到指定canvas节点即可，建议最好使用id来表示，id具有唯一性，获取节点方便。标签样式可以设置，也可以不设置。在标签之间的内容为提示性语句，如果浏览器支持HTML5的<canvas>标签，该部分内容会被忽略，如果不支持，会显示该部分内容，代码示例如下，其中设置display是为了在不支持<canvas>标签的浏览器中能以块元素显示内容，如果不设置，会将自定义元素默认为内联元素。

JavaScript部分

在通常情况下，我们都是等待DOM加载完毕后执行JavaScrip脚本内容，因此，我们需要在onload事件中编写我们的脚本内容。

代码示例如下：

通过示例可以看到，绘图时要先找到canvas节点，再通过其getContext方法得到绘图区，其中canvas变量，整个canvas标签的区域，即画布的宽高，及图形类型”2d”或”3d”都可以根据实际自行定义，但API不能更换，这部分是绘制所有canvas图形时都需要有的部分。

直线绘图API总结

1. API功能总结

   (1). canvas.moveTo(x,y)

   功能：与我们使用笔来画线类似，这个函数类似于将笔尖移动到指定的点，即坐标(x,y)。

   使用场景：在canvas初始化后或者调用canvas.beginPath()后用来设置起点。另外，在需要绘制不连续的线段时，也需要使用此方法移动目标点。

   下面是从FireFox官网MDN网站上摘取的一个绘制笑脸图案的代码（arc方法用来绘制弧形）：

(2). context.lineTo(x,y)

功能：绘制一条从当前到指定位置坐标(x,y)的一条直线。

使用场景：直线的起点可以使用context.moveTo(x,y)来设置，再使用context.lineTo(x,y)将两个点连成一条线段，也可以只使用两个context.lineTo(x,y)来连成一条线段。当需要多条线段时，可以使用多个context.lineto(x,y)连接。

绘制一条直线的例子：

(3). context.stroke()

功能：通过线条来绘制图形轮廓，只有使用了该方法，才能在屏幕上显示出线条。

(4). context.strokeStyle=”[color]”

功能：设置线条的颜色。color值为CSS支持的所有种类颜色值。

(5). context.beginPath()

功能：新建一条路径，即重新开始一段绘图路径。

使用场景：需要绘制不同颜色线条、不同填充色等线条图形时，需要使用context.beginPath()和context.closePath()包围绘图区块。

(6). context.closePath()

功能：与context.beginPath()相反，该方法关闭区域，当绘制闭合的图形时需要使用这对方法。

(7). context.fillStyle=”[color]”

与context.strokeStyle类似，不同点是，该方法用来填充内部区颜色，颜色值也同样是CSS支持的所有值。

(8). context.fill()

与context.stroke()类似，不同的是，该方法对线段组成的图形进行内部颜色填充。

注意：canvas绘图时，后面的绘制的图形如果与前面绘制的图形有重叠，那么后面的图形将显示在上层，下层图形会被覆盖，如果上层图形设置了透明度，下面的图形覆盖部分将会有部分颜色显示。因此，在实际使用中，需要先使用context.fill()再使用context.stroke()，可以防止线条被填充的颜色覆盖。

在一个canvas标签内绘制多个不同颜色等标签时，使用context.beginPath()和context.closePath()绘制时，将stroke放在后面，而使用context.fillRect()时需放方法前面，否则会出现样式覆盖问题。如果想所有的样式一致，可以值设置一个样式。

下面是一个小的示例：

功能：直接绘制矩形，x,y是起点坐标，width和height是矩形的宽和高。

使用场景：绘制指定宽高矩形时可以直接使用，绘制出来的是空心的矩形。如果需要自定义样式，在需求多个图形样式有各自的风格时，必须在调用该方法之前设置fillStyle或strokeStyle方法。

(10). context.fillRect(x,y,width,height)

功能：直接绘制填充颜色的矩形。设置样式如context.rect()

(11). context.lineCap=”[value]”

功能：在线段两端添加特定样式，value值为：butt，默认，添加平直的边缘；round，添加圆形线帽；square，添加正方形线帽。

下面是展示几种不同属性值的样式代码示例：

功能：设置两条线段相交的样式，如>交接的地方即由此方法设置。value值有：bevel，创建斜角；round，创建圆角；miter 默认，创建尖角。

(13). context.lineWidth=value

功能：设置线条的粗细，value为数值，如context.lineWidth=1。

使用多个五角星实现星云图案

最后记录下使用直线绘图知识实现的综合案例：通过绘制多个五角星，实现星云排布。五角星主要是通过两个圆，内圆与外圆五等分找出五个点，通过直线连接实现；星云则是通过随机数产生偏移位置和随即设置五角星内外圆半径产出不同大小五角星实现。

最后，给出源代码。

结语

本文到此结束了，通过学习，给我的感受就是，单个API的功能很容易记住，但是在实际使中常常会遇到很多问题，因此，多练习才是真正掌握知识的不二法门。谢谢您的阅读，订阅走一波。