HTML5中使用canvas绘制复杂图形

接下来，我们来看一下除了arc方法以外，其他使用路径绘制图形时会使用的方法。首先从绘制直线开始。

绘制直线一般会用到2个方法，分别是moveTo方法，lineTo方法

1.moveTo方法

moveTo方法的作用是将光标移动到指定的位置，绘制直线的时候以这个坐标为起点。使用如下：moveTo（x,y）;

该方法有2个参数，x指指定左标的横坐标，y指指定坐标的纵坐标。

2.lineTo方法

lineTo方法是指在moveTo方法指定直线的起点和指定直线终点之间绘制一条直线。使用如下：

lineTo（x,y）;

该方法的2个参数和moveTo方法的参数意义一样。使用该方法绘制完直线后，光标会自动移到lineTo指定的直线的终点。

因此，在创建路径时，需要使用moveTo方法将光标移动到指定的直线起点，使用lineTo方法在直线起点和直线终点之间创建路径，然后将光标移动到指定直线终点。

 


运行结果：