HTML Canvas - createPattern() 方法

HTML Canvas 的 createPattern() 方法使用特定的图形创建图案，并通过根据传递的参数重复该图案将其渲染到 Canvas 元素上。

语法

以下是 HTML Canvas createPattern() 方法的语法：

CanvasRenderingContext2D.createPattern(object, repetition);

参数

以下是此方法的参数列表：

序号	参数和描述
1	object Canvas 元素中要用于图案的图像对象或任何可用的图形。
2	repetition 指示图案图像的字符串值。接受的值为： 'repeat' 'repeat-x' 'repeat-y' 'no-repeat'

序号

参数和描述

object

Canvas 元素中要用于图案的图像对象或任何可用的图形。

repetition

指示图案图像的字符串值。接受的值为：

'repeat'
'repeat-x'
'repeat-y'
'no-repeat'

返回值

当上下文对象调用该方法时，它会在 Canvas 上使用指定的重复值渲染图案。

示例

以下示例获取一个徽标，并使用 HTML Canvas createPattern() 方法在 Canvas 元素上下文中打印图案，直到它间隔开来。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="500" height="400" style="border: 1px solid black; background-color: black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.src = 'https://tutorialspoint.com/green/images/diamond.png';
      image.onload = function() {
         var pattern = context.createPattern(image, 'repeat');
         context.fillStyle = pattern;
         context.fillRect(0, 0, canvas.width, canvas.height);
      }
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出如下：

示例

以下示例仅在水平方向上重复给定的图像，使用 createPattern() 方法。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="700" height="400" style="border: 1px solid black; "></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.src = 'https://tutorialspoint.com/images/logo.png';
      image.onload = function() {
         var pattern = context.createPattern(image, 'repeat-x');
         context.fillStyle = pattern;
         context.fillRect(0, 0, canvas.width, canvas.height);
      }
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出如下：

示例

以下示例仅在垂直方向上重复给定的图像，使用 createPattern() 方法。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="500" height="400" style="border: 1px solid black; "></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.src = 'https://tutorialspoint.com/images/logo.png';
      image.onload = function() {
         var pattern = context.createPattern(image, 'repeat-y');
         context.fillStyle = pattern;
         context.fillRect(0, 0, canvas.width, canvas.height);
      }
   </script>
</body>
</html>