HTML Canvas fill() 方法

在 HTML Canvas 中，fill() 方法用于填充绘制的图形。这个方法可以让我们在 Canvas 上创建各种颜色和样式的填充效果。在本文中，我将详细介绍 fill() 方法的用法以及一些示例代码。

基本用法

fill() 方法是 Canvas 2D 上下文的方法之一，用于填充当前路径。在使用 fill() 方法之前，我们需要先绘制一个路径。绘制路径的方法包括画线、画圆、画矩形等。

下面是一个简单的示例，演示如何使用 fill() 方法填充一个矩形：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Canvas Fill Example</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 100, 50);
    ctx.fill();
  </script>
</body>
</html>

在这个示例中，我们首先获取 Canvas 元素和上下文对象，然后设置填充颜色为红色，绘制一个矩形并调用 fill() 方法进行填充。

设置填充样式

除了填充颜色外，我们还可以设置填充样式，包括渐变、图案等。下面是一个使用线性渐变填充矩形的示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Canvas Gradient Fill Example</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    var gradient = ctx.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop(0, 'blue');
    gradient.addColorStop(1, 'white');

    ctx.fillStyle = gradient;
    ctx.fillRect(10, 10, 100, 50);
    ctx.fill();
  </script>
</body>
</html>

在这个示例中，我们使用 createLinearGradient() 方法创建了一个线性渐变对象，并设置了起始和结束颜色。然后将这个渐变对象设置为填充样式，并填充矩形。

总结

通过本文的介绍，你应该对 HTML Canvas 中的 fill() 方法有了更深入的了解。除了上面提到的用法外，fill() 方法还可以与其他绘图方法一起使用，实现更加复杂的效果。希望本文能帮助你更好地使用 Canvas 绘制各种图形和效果。