一.绘制不规则图形的思路
绘制路径的作用:为了设置一个不规则的多边形状态。
路径是闭合的,需要按照规定的步骤进行绘制。步骤如下:
1.需要设置路径起点
开始路径。
ctx.beginPath();
2.使用绘制命令画出路径
①移动绘制点。
ctx.moveTo(x,y);
②描述绘制路径。
ctx.lineTo(x,y);
③再次描述路径。
ctx.lineTo(x,y);
3.封闭路径
闭合路径。
ctx.closePath();
4.填充或者绘制已经封闭路径的形状
①描边。
ctx.stroke();
②填充。
ctx.fill();
注意事项:颜色默认是黑色,如果要改变颜色,就可以在前面加上修改颜色的代码。
二.源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible