html canvas fill()方法在画布上填充颜色

HTML Canvas fill() 方法

HTML Canvas fill() 方法是一种在画布上填充颜色的方法，它可以让我们在画布上绘制出更加美观的图案。

// 绘制一个矩形
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 150, 100);

上面的代码中，我们使用了 HTML Canvas fill() 方法，它能够在画布上绘制出一个矩形，并且使用了红色的颜色填充。

HTML Canvas fill() 方法还可以用于绘制圆形、椭圆形、多边形等形状，例如：

// 绘制一个圆形
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();

上面的代码中，我们使用了 HTML Canvas fill() 方法，它能够在画布上绘制出一个圆形，并且使用了蓝色的颜色填充。

HTML Canvas fill() 方法还可以用于绘制一些更复杂的图形，例如：

// 绘制一个复杂的图形
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.fill();

上面的代码中，我们使用了 HTML Canvas fill() 方法，它能够在画布上绘制出一个复杂的图形，并且使用了绿色的颜色填充。

HTML Canvas fill() 方法是一种非常有用的方法，它可以帮助我们在画布上填充颜色，从而创建出更加美观的图案。