深入剖析 CanvasRenderingContext2D 的描边和填充方法

stroke() 方法

stroke() 方法的基本用法如下：

ctx.strokeStyle = "#FF0000"; // 设置描边的颜色
ctx.lineWidth = 2; // 设置描边的宽度
ctx.stroke(); // 描边路径

上面的代码将用红色的 2 像素宽的线条来描边路径。strokeStyle 属性可以设置描边的颜色，lineWidth 属性可以设置描边的宽度。

stroke() 方法还可以接受一个 Path2D 对象作为参数。Path2D 对象是用来表示路径的，我们可以通过它来创建各种各样的形状。下面的代码使用 Path2D 对象来创建一条直线，然后用 stroke() 方法来描边：

var path = new Path2D();
path.moveTo(0, 0);
path.lineTo(100, 100);
ctx.stroke(path);

上面的代码将在画布上绘制一条从原点到 (100, 100) 的直线。

fill() 方法

fill() 方法的基本用法如下：

ctx.fillStyle = "#FF0000"; // 设置填充的颜色
ctx.fill(); // 填充路径

上面的代码将用红色填充路径。fillStyle 属性可以设置填充的颜色。

fill() 方法也可以接受一个 Path2D 对象作为参数。下面的代码使用 Path2D 对象来创建一条直线，然后用 fill() 方法来填充：

var path = new Path2D();
path.moveTo(0, 0);
path.lineTo(100, 100);
ctx.fill(path);

上面的代码将在画布上填充一条从原点到 (100, 100) 的直线。

示例

下面是一些使用 stroke() 和 fill() 方法创建的图形的示例：

• 一个红色的正方形：

ctx.strokeStyle = "#FF0000";
ctx.lineWidth = 2;
ctx.strokeRect(0, 0, 100, 100);

ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 100, 100);

• 一个蓝色的圆形：

ctx.strokeStyle = "#0000FF";
ctx.lineWidth = 2;
ctx.strokeCircle(50, 50, 50);

ctx.fillStyle = "#0000FF";
ctx.fillCircle(50, 50, 50);

• 一个绿色的三角形：

ctx.strokeStyle = "#00FF00";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(100, 0);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();

ctx.fillStyle = "#00FF00";
ctx.fill();

这些只是使用 stroke() 和 fill() 方法创建图形的一些简单示例。我们可以通过结合这两个方法来创建各种各样的复杂的图形。

总结

stroke() 和 fill() 方法是 CanvasRenderingContext2D 的两个非常重要的方法，它们可以用来描边和填充路径。我们可以通过这两个方法来创建各种各样的图形和图像。希望本文能帮助您更好地理解这两个方法的使用方法。