线条：
context.moveTo(40, 40); // 将笔移动到 (40, 40) context.lineTo(340, 40); // 用笔画线到 (340, 40) context.stroke(); // 让线条描绘出来
路径：线条除了绘制直线, 还可以勾出路径. 路径是什么? 类似 Photoshop 的线圈工具. 在画布中可以使用 beginPath 和 closePath 两个方法搭配构建路径,
1. 绘制三根线条
context.moveTo(40, 40); // 将笔移动到 (40, 40) context.lineTo(340, 40); // 用笔画线到 (340, 40) context.lineTo(340, 100); // 用笔画线到 (340, 100) context.lineTo(40, 100); // 用笔画线到 (40, 100) context.stroke(); // 让线条显示出来 |
2. 在绘制线条之前标记路径结束. 路径将进行闭合：
context.beginPath(); // 开始路径 context.moveTo(340, 40); // 用笔画线到 (340, 40) context.lineTo(340, 100); // 用笔画线到 (340, 100) context.lineTo(40, 100); // 用笔画线到 (40, 100) context.closePath(); // 结束路径 context.stroke(); // 让线条显示出来 |
3. 填充路径圈定区域.
context.beginPath(); // 开始路径 context.moveTo(340, 40); // 用笔画线到 (340, 40) context.lineTo(340, 100); // 用笔画线到 (340, 100) context.lineTo(40, 100); // 用笔画线到 (40, 100) context.closePath(); // 结束路径 context.fill(); // 让线条显示出来 |
矩形
绘画矩形有用于勾画矩形和填充矩形使用的两个方法.
context.strokeRect(x, y, width, height); // 只勾画出矩形的外框 context.fillRect(x, y, width, height); // 画出矩形并使用颜色填充矩形区域 |
圆形
圆形与矩形不同, 没有勾画和填充的方法. 可通过 arc 圈出来的是圆形路径, 再通过前面提及的 stroke 和 fill 方法进行勾画和填充.
context.arc(x, y, radius, startAngle, endAngle, anticlockwise); |
圆形
圆形与矩形不同, 没有勾画和填充的方法. 可通过 arc 圈出来的是圆形路径, 再通过前面提及的 stroke 和 fill 方法进行勾画和填充.
context.arc(x, y, radius, startAngle, endAngle, anticlockwise); |
这一共有 6 个参数. x 是圆心的横坐标, y 是圆心的纵坐标, radius 是半径, startAngle 是开始画圆的角度, endAngle 是结束画圆的角度, anticlockwise 是画圆方向.
时间： 2024-10-16 21:35:18