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方法在直线起点和直线终点之间创建路径，然后将光标移动到指定直线终点。

运行结果：

1、使用画布的话，你直接在绘制的长方形基础上，在右上角再绘制一个空白的长方形就好了，然后在空白的部分绘制不规则图形；

2、或者，直接绘制一个右上角空白的图形，在空白部分进行你的绘制。

canvas按照坐标进行绘制，你直接确定坐标就给你画好了，网上关于canvas教程很多，自己看下吧。链接：网页链接

---