这一节，我们将了解关于canvas中如何绘制路径，并详细的介绍一下线的有关知识点
图形的基本元素是路径： 路径是通过不同颜色和粗细的线段或曲线相连形成的不同形状的点的集合
2D 绘制上下文支持很多在画布上绘制路径的方法，通过路径可以创造出复杂的形状和线条，要绘制路径，首先必须调用 beginPath() 方法，表示要开始绘制新路径。
路径绘制图形-凌波微步（五步）:
气运丹田： 开始绘制新路径
beginPath(): 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
第一步： 创建路径的起始点 (2B铅笔：下笔)
moveTo(x, y): 把路径移动到画布中的指定点，不创建线条
第二步： 根据坐标画出路径(2B铅笔：移动笔)
lineTo(x, y) : 添加一个新点，然后在画布中创建从该点到最后指定点的线条
第三步： 是否闭合路径(2B铅笔：提起笔)
closePath() 方法创建从当前点到开始点的路径。(闭合路径)
第四步： 路径生成之后，选择描边或者填充路径的范围(蜡笔：上色)
1、描边: stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
修改描边颜色：使用strokeStyle= color;
2、填充: fill() 方法填充当前的图像（路径）。默认颜色是黑色。
修改填充颜色： 使用fillStyle = color;
注意: 如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，来关闭该路径，然后填充该路径
橡皮擦：
clearRect(x, y, width, height) : 清除某区域
语法： x坐标, y坐标, 宽度, 高度
实践：画一个网格
HTML
<body>
<canvas width="500" height="500" id="draw">
浏览器不支持Canvas
</canvas>
</body>
JS
var draw = document.getElementById('draw');
// 2D上下文 ： 可绘制简单的2D图形，矩形 弧形 路径
var ctx = draw.getContext('2d');
自上而下，从左往右，间隔为50，画10根线，形成一个网格
for (var i = 0; i <= 10; i++) {
// 开始绘制路径
ctx.beginPath();
// (列)
// 路径的起点 (下笔)
ctx.moveTo(i * 50, 0);
// 路径的终点 (提笔)
ctx.lineTo(i * 50, 500);
// (行)
// 路径的起点 (下笔)
ctx.moveTo(0, i * 50);
// 路径的终点 (提笔)
ctx.lineTo(500, i * 50);
// 关闭路径
ctx.closePath();
// 描边路径
ctx.stroke();
}
效果图
image.png
栗子二： 绘制三角
// 绘制三角
// 开始绘制路径
ctx.beginPath();
// 路径的起点 (下笔)
// 第一个顶点
ctx.moveTo(200, 200);
// 第二个顶点
ctx.lineTo(300, 200);
// 第三个顶点
ctx.lineTo(250, 250);
// 闭合路径
ctx.closePath();
// 填充
ctx.fill();
效果图:
image.png
可以试着矩形以及其他的简单多边形来练练手，这样对于canvas是中的坐标以及简单API加强印象~
网友评论