HTML Canvas createpattern() 方法

在 web 前端开发中，HTML Canvas 是一个非常强大的工具，可以用来绘制各种图形和动画。其中，createPattern() 方法是一个非常有用的方法，它允许我们创建一个填充样式，该样式是由一个指定的图片和重复方式组成的。

语法

CanvasRenderingContext2D.createPattern(image, repetition);

• image：指定要使用的图片，可以是一个 Image 对象、Canvas 对象或 Video 对象。
• repetition：指定如何重复图像。可以是以下值之一：
  • "repeat"：默认值。图像在水平和垂直方向重复。
  • "repeat-x"：图像在水平方向重复。
  • "repeat-y"：图像在垂直方向重复。
  • "no-repeat"：图像不重复，只显示一次。

示例代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Canvas createPattern() 方法示例</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = "pattern.png";
    img.onload = function() {
      var pattern = ctx.createPattern(img, "repeat");
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    };
  </script>
</body>
</html>

在上面的示例中，我们首先创建了一个 canvas 元素，并获取了其 2D 上下文。然后，我们创建了一个 Image 对象，并指定了要使用的图片。在图片加载完成后，我们使用 createPattern() 方法创建了一个填充样式，并将其应用到 canvas 上。

应用场景

createPattern() 方法通常用于创建复杂的填充样式，比如纹理、背景图案等。通过指定不同的重复方式，我们可以实现各种独特的效果。

总的来说，HTML Canvas 的 createPattern() 方法为我们提供了一个非常灵活和强大的方式来处理图像填充，使我们能够轻松地实现各种视觉效果。希望本文对你有所帮助！