From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/canvaspattern/index.html | 118 +++++++++++++ .../web/api/canvaspattern/settransform/index.html | 187 +++++++++++++++++++++ 2 files changed, 305 insertions(+) create mode 100644 files/ja/web/api/canvaspattern/index.html create mode 100644 files/ja/web/api/canvaspattern/settransform/index.html (limited to 'files/ja/web/api/canvaspattern') diff --git a/files/ja/web/api/canvaspattern/index.html b/files/ja/web/api/canvaspattern/index.html new file mode 100644 index 0000000000..2d8f6f0a07 --- /dev/null +++ b/files/ja/web/api/canvaspattern/index.html @@ -0,0 +1,118 @@ +--- +title: CanvasPattern +slug: Web/API/CanvasPattern +tags: + - API + - Canvas + - Interface + - Reference +translation_of: Web/API/CanvasPattern +--- +
{{APIRef("Canvas API")}}
+ +

CanvasPattern インターフェースは、{{domxref("CanvasRenderingContext2D.createPattern()")}} メソッドによって（画像、 canvas 要素、video 要素をもとに）生成される不透明なオブジェクトです。

+ +

プロパティ

+ +

不透明なオブジェクトを表し、公開されたプロパティはありません。

+ +

メソッド

+ +

継承されたメソッドはありません。

+ +
+
{{domxref("CanvasPattern.setTransform()")}} {{experimental_inline}}
+
パターンに線形の変化を表す {{domxref("SVGMatrix")}} を適用する。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('HTML WHATWG', "the-canvas-element.html#canvaspattern", "CanvasPattern")}}{{Spec2('HTML WHATWG')}}v5 で setTransform() メソッドを追加。
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート4.0{{CompatGeckoDesktop("1.9.2")}}9.09.03.1
setTransform(){{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop("33")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート2.1{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}10.03.2
setTransform(){{experimental_inline}}{{CompatUnknown}}{{CompatGeckoMobile("33")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

関連項目

+ + diff --git a/files/ja/web/api/canvaspattern/settransform/index.html b/files/ja/web/api/canvaspattern/settransform/index.html new file mode 100644 index 0000000000..151ab28f41 --- /dev/null +++ b/files/ja/web/api/canvaspattern/settransform/index.html @@ -0,0 +1,187 @@ +--- +title: CanvasPattern.setTransform() +slug: Web/API/CanvasPattern/setTransform +tags: + - API + - Canvas + - CanvasPattern + - Experimental + - Method + - Reference +translation_of: Web/API/CanvasPattern/setTransform +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

CanvasPattern.setTransform() メソッドは、パターンの変換マトリックスとして {{domxref("SVGMatrix")}} オブジェクトを使用し、パターンにこれを実行します。

+ +

構文

+ +
void pattern.setTransform(matrix);
+
+ +

パラメータ

+ +
+
matrix
+
パターンの変換行列として使用する {{domxref("SVGMatrix")}}。
+
+ +

例

+ +

setTransform メソッドを使用する

+ +

これは setTransform メソッドを使用して {{domxref("SVGMatrix")}} によるパターン変形を指定して {{domxref("CanvasPattern")}} を生成する簡単なコードスニペットです。たとえば、パターンが現在の {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} として適用され、{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} メソッドを使用すると、 canvas に描画されます。

+ +

HTML

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

JavaScript

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

以下のコードを編集して、canvas 上での変化を確認してください：

+ + + +

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

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('HTML WHATWG', "scripting.html#dom-canvaspattern-settransform", "CanvasPattern.setTransform")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatUnknown}}{{ CompatGeckoDesktop("33") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile("33") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

関連項目

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