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.tw/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.tw/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.tw/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>