HTML5画布，前端高级工程师系列学习路线介绍，最新高频前端面试题目分享

context.stroke()

结合前面的几步，就可以得到画出一条直线，如下所示：

4、线的样式

1、线的宽度

使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。

语法如下：

context.lineWidth=‘10’;

2、描边颜色

使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。

语法如下：

//以下两种方式都可以设置

context.strokeStyle=‘#f00’;

//context.strokeStyle=‘red’;

3、端点形状

默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。

lineCap=’属性值’

常见的属性值有：

| 属性值 | 显示效果 |

| — | — |

| butt(默认值） | 默认效果，无端点，显示直线方形边缘 |

| round | 显示圆形端点 |

| square | 显示方形端点 |

5、线的路径

1、重置路径

在同一画布中，我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径，就需要使用beginPath()方法，当出现beginPath()即表示路径重新开始。

2、闭合路径

闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中，使用closePath()方法闭合路径。

6、填充路径

使用画布中的fill()方法填充图形。

var context = document.getElementById(“cas”).getContext(‘2d’);

context.moveTo(10,10);//定义初始位置

context.lineTo(10,100);//定义连线端点

context.lineTo(100,100);//定义连线端点

context.fill();//填充图形

如下图所示：

7、 绘制圆

在画布中，使用arc()方法可以绘制圆或弧线。

语法：

arc(x,y,r,开始角,结束角,方向)

x和y：x和y表示圆心在x轴和y轴的坐标位置。

r：表示圆形或弧形的半径，用于确定图形的大小。

开始角：表示初始弧点位置。其中弧点使用数值和“Math.PI”（圆周率，可以理解为180度）表示。

结束角：结束的弧点位置，初始角的设置方式一致。

方向：分为顺时针和逆时针绘。

二、绘制火柴人案例

========================================================================

绘制如下所示的页面：

代码如下所示：