From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../createpattern/index.html | 200 +++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html (limited to 'files/zh-cn/web/api/canvasrenderingcontext2d/createpattern') diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html new file mode 100644 index 0000000000..fd6c4d7d0e --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.html @@ -0,0 +1,200 @@ +--- +title: CanvasRenderingContext2D.createPattern() +slug: Web/API/CanvasRenderingContext2D/createPattern +translation_of: Web/API/CanvasRenderingContext2D/createPattern +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.createPattern() 是 Canvas 2D API 使用指定的图像 ({{domxref("CanvasImageSource")}})创建模式的方法。 它通过repetition参数在指定的方向上重复元图像。此方法返回一个{{domxref("CanvasPattern")}}对象。

+ +

语法

+ +
CanvasPattern ctx.createPattern(image, repetition);
+
+ +

参数

+ +
+
image
+
作为重复图像源的 {{domxref("CanvasImageSource")}} 对象。可以是下列之一： +
    +
  • {{domxref("HTMLImageElement")}} ({{HTMLElement("img")}}),
    • +
  • {{domxref("HTMLVideoElement")}} ({{HTMLElement("video")}}),
    • +
  • {{domxref("HTMLCanvasElement")}} ({{HTMLElement("canvas")}}),
    • +
  • {{domxref("CanvasRenderingContext2D")}},
    • +
  • {{domxref("ImageBitmap")}},
    • +
  • {{domxref("ImageData")}},
    • +
  • {{domxref("Blob")}}.
    • +
+
+
repetition
+
{{domxref("DOMString")}}，指定如何重复图像。允许的值有： +
    +
  • "repeat" (both directions),
    • +
  • "repeat-x" (horizontal only),
    • +
  • "repeat-y" (vertical only), 
    • +
  • "no-repeat" (neither).
    • +
+ 如果为空字符串 ('') 或 {{jsxref("null")}} (但不是 {{jsxref("undefined")}})，repetition将被当作"repeat"。
+
+ +

返回值

+ +
+
{{domxref("CanvasPattern")}}
+
描述模式的不透明对象
+
+ +

示例

+ +

使用createPattern方法

+ +

这是一段简单的代码片段，使用 createPattern 方法创建一个指定图像和重复的{{domxref("CanvasPattern")}} 对象。创建完成后，可以使用{{domxref("CanvasPattern.setTransform()")}}方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+img.onload = function() {
+  var pattern = ctx.createPattern(img, 'repeat');
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0,0,400,400);
+};
+
+ +

编辑以下代码并在线查看canvas变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

规范描述

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createpattern", "CanvasRenderingContext2D.createPattern")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML Canvas 2D Context W3C', "#dom-context-2d-createpattern", "CanvasRenderingContext2D.createPattern")}}{{Spec2('HTML5 W3C')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf