Canvas createPattern() 方法
要使用的影像
示例
水平和垂直重複影像
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
自己動手試一試 »
描述
createPattern() 方法在指定方向上重複指定的元素。
該元素可以是影像、影片或另一個 <canvas> 元素。
重複的元素可用於繪製/填充矩形、圓形、線條等。
| JavaScript 語法 | context.createPattern(image, "repeat|repeat-x|repeat-y|no-repeat"); |
|---|
引數值
| 引數 | 描述 |
|---|---|
| 圖片 | 指定要使用的圖案的影像、畫布或影片元素 |
| 重複 | 預設。圖案同時在水平和垂直方向上重複 |
| repeat-x | 圖案僅在水平方向上重複 |
| repeat-y | 圖案僅在垂直方向上重複 |
| no-repeat | 圖案僅顯示一次（不重複） |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
createPattern() 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
