HTML 5 画布

Posted 2020-07-10

线条：

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 是画圆方向.