From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/canvas_api/a_basic_ray-caster/index.html | 56 +++++ .../drawing_graphics_with_canvas/index.html | 212 +++++++++++++++++ files/ja/web/api/canvas_api/index.html | 137 +++++++++++ .../tutorial/compositing/example/index.html | 260 +++++++++++++++++++++ .../api/canvas_api/tutorial/compositing/index.html | 113 +++++++++ .../hit_regions_and_accessibility/index.html | 101 ++++++++ files/ja/web/api/canvas_api/tutorial/index.html | 72 ++++++ 7 files changed, 951 insertions(+) create mode 100644 files/ja/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html create mode 100644 files/ja/web/api/canvas_api/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/index.html (limited to 'files/ja/web/api/canvas_api') diff --git a/files/ja/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ja/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..1d2d6d5872 --- /dev/null +++ b/files/ja/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,56 @@ +--- +title: A basic ray-caster +slug: Web/API/Canvas_API/A_basic_ray-caster +tags: + - Advanced + - Canvas + - Example + - Graphics + - HTML + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +
{{CanvasSidebar}}
+ +
+

この記事では実世界で ray-casting を使用した 3D描画に役立つ{{HTMLElement("canvas")}}の要素の使用例を提供します。

+
+ +

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+ +

Open in new window

+ +

動機付け

+ +

この気のきいた <canvas> 要素についての記事を読んでいたら Firefox でそろそろサポートされるだけでなく、最新の Safari でサポート済みなののを知ったので、簡単なサンプルを試す必要に駆られました。

+ +

MDN で見つけた canvas に関する概要とチュートリアルはとても素晴らしです、しかし誰もアニメーションについては書いてくれませんでした。なので私がほんの前に動かした基本的な raycaster を移植した方が良いだろうと思うに至りました。ぜひ JavaScript 制御のピクセルバッファーの底力を確認してください。

+ +

基本動作

+ +

基本的なアイディアは {{domxref("window.setInterval","setInterval()")}}  を使って任意の遅延時間で欲しいフレームレートに一致させるということです。毎フレームでの更新関数は現在のビューを canvas に再描画します。もちろん私はもっと簡単なサンプルをで始めることもできました。私はこの canvas チュートリアルで出来るのは分かっていたので、この方法で可能だということを示したかったのです。

+ +

全てのフレームで raycaster はユーザーがキーを押したかどうか見ていて、ユーザーが操作しないときに無駄な計算が発生しない様にします。操作が発生した場合 canvas をクリアしたのちに空と地面が描画されカメラの向きや位置が更新され、ray が投射されます。ray が壁と交差するとき垂直の銀色の壁が描画されます。壁との距離が遠くなると色がだんだん暗くなっていきます。カメラと壁との距離に応じて銀色の高さも調節され、水平線の中央に描画されます。

+ +

私が書いたコードは André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070) の raycaster の項と オンラインで見つけた Java の raycater とを融合させ、意味のわかるようにリネームしたいという私の強い欲望を通過して、なお全て動作させる必要があった。

+ +

詳細

+ +

Safari 2.0.1 での動作はとても良いです。銀の 8 ピクセル幅のブロックネスでは Apple mini 上で 320 x 240 ピクセル 24fps で動作しました。FireFox 1.5 Beta 1 はそれよりも速く、320 x 240 ピクセル 24fps で 4 ピクセル幅で動作しました。確かに新しい ID ソフトウェアの仲間では無くとも、とても丁寧に実行をする様に考えられていてメモリー割り当てやビデオモードやアセンブラの内部ルーチンのコーディングを気にして書く必要がありませんでした。このコードは、事前計算した値の配列を見るなど、とても効率的に動く様に調整されていていますが、私は特に最適化の施しをしていません。このため、まだ速く動作するように書き直せるでしょう。

+ +

また、ゲームエンジンとして動作するにはいくつかするべき事を残しています。例えば 「壁のテクスチャーが無い」「スプライトが無い」「扉が無い」「別の階に移動するワープ」といった類です。十分な時間を私に頂けるなら全部実装できると思いますけどね。この canvas API は画像のピクセルコピーをサポートしていて、テクスチャーは容易だと思います。将来的に他の記事で、たぶん他の人が対応してくれる為にも残しておこうと思います。=)

+ +

ray-caster について

+ +

とても良い人が手作業でファイルをコピーしてくれたので、この場所で試せるのでぜひ見てください。そして誰でもハックできる様にコードをそれぞれ小分けしておいてあります。（下部参照）

+ +

Safari 1.3+ か Firefox 1.5+ かその他の <canvas> 要素をサポートするブラウザーで動きます。楽しんで！

+ +


+ input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

参考

+ + diff --git a/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html b/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..54b8ef8310 --- /dev/null +++ b/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html @@ -0,0 +1,212 @@ +--- +title: canvas に絵を描く +slug: Web/API/Canvas_API/Drawing_graphics_with_canvas +tags: + - HTML + - HTML5 + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

このページには、一部古い内容が含まれています。

+
+ +

イントロダクション

+ +

Firefox 1.5 より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<canvas> は WHATWG の canvas の仕様を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <canvas> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。

+ +

<canvas> は 1 つ以上の描画コンテクスト を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 WebGL レンダリングコンテクストを用いると良いでしょう。

+ +

2 次元描画コンテクスト

+ +

初歩的な例

+ +

始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。

+ +
function draw() {
+  var myCanvas = document.getElementById('canvas');
+  var ctx = myCanvas.getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+
+ + + +
{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}
+ +

draw 関数は、まず canvas 要素を取得し、次にその canvas 要素 の 2 次元レンダリングコンテクストを取得しています。 ctx オブジェクトは canvas に実際に描画するのに使うことができます。例では CSS color 仕様による 2 つの異なる色を fillStyle プロパティで設定し、fillRect メソッドにより 2 つの長方形を単純に塗りつぶしています。 2 つ目の fillStyle は色と一緒に透明度を定義するために rgba() を使っています。

+ +

fillRect() は矩形状の塗りつぶし、strokeRect() は矩形状の輪郭線の描画、 clearRect() はコンテクストの指定部分の消去に用います。より複雑な形を描画するにはパスを用います。

+ +

パスの利用

+ +

beginPath メソッドは新しいパスの作成を開始します。そして moveTo、lineTo、arcTo、arc などのメソッドはパスにセグメントを加えるのに使われます。パスは closePath メソッドによって閉じることが可能です。パスの作成後、fill か stroke を使って canvas コンテクストにパスを描画します。

+ +
function draw() {
+  var myCanvas = document.getElementById('canvas');
+  var ctx = myCanvas.getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); これは間違い
+
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- これが正しい書式 ->
+
+  ctx.lineTo(30, 30);
+
+  ctx.fill();
+}
+ + + +
{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}
+ +

fill() か stroke() を呼ぶと現在のパスが使われます。 もう一度塗りつぶしか輪郭線を描くにはパスを再作成しなくてはなりません。

+ +

レンダリングコンテクストの状態

+ +

fillStyle 、strokeStyle 、lineWidth 、 lineJoin のようなコンテクストの属性は、現在のレンダリングコンテクストの状態の一部です。 コンテクストは現在の状態を状態スタックに格納したり取り出したりするために save() と restore() という 2 つのメソッドを提供してます。

+ +

より複雑な例

+ +

パス、状態、変換行列を用いた少し複雑な例を紹介します。 translate() 、scale() 、rotate() のコンテクストメソッドは全て現在の行列を変換します。 全ての描画された点は最初にこの行列により変換されます。

+ +
function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 以後の全て変換はこの変換から相対的であることに注意
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // 不要
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+
+ + + +
{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}
+ +

drawBotie 関数及び dot 関数を定義し、 draw 関数内で 4 回使用しています。 それぞれを呼び出す前に、translate() 及び rotate() を現在の変換行列を用意するために用いています。その変換行列は順番に点と蝶ネクタイを配置します。 dot 関数は (0, 0) を中心に小さな黒い正方形を描画します。 dot は変換行列によって移動されます。 drawBowtie は第 1 引数に指定した塗りつぶしスタイルを使い、単純な蝶ネクタイのパスを描画します。

+ +

行列の操作は累積されるので、save() 及び restore() はそれぞれが設定した元の canvas の状態に復帰するために使われます。 注目すべきは、回転が常に現在の基点の周りで起こるということです。 従って translate() rotate() translate() の連続は translate() translate() rotate() の連続実行とは異なった結果を生みます。

+ +

Apple の <canvas> との互換性

+ +

<canvas> は Apple の実装とその他の実装で互換性があります。 しかし、いくつかの注意すべき問題があります。

+ +

必須の </canvas> タグ このセクションの内容には古い情報が含まれます

+ +

Apple の Safari の実装においては、<canvas> は <img> とほぼ同じような方法で実装された要素で、終了タグを持っていません。 しかしながら、<canvas> がウェブで広く普及するために、 代替内容のための何らかの方法を提供しなければなりません。 したがって、Mozilla の実装では、 終了タグが必須となっています。

+ +

代替内容が必要無い場合、単純に <canvas id="foo" ...></canvas> とすれば、Safari は終了タグを無視し、 Safari と Mozilla の両方で完全に互換性を持つでしょう。

+ +

もし代替内容が望まれるならば、(canvas だけが描画されるべき) Safari から代替内容を隠すために、そして(代替内容が表示されるべき) IE から canvas 自体を隠すためにいくつかの CSS のトリックを使わなければなりません。

+ +

現在は canvas 要素の内容には代替コンテンツを配置するように仕様書で定められています。

+ +

その他の機能

+ +

canvas への Web コンテンツの描画

+ +
この機能は Chrome 特権コードの実行時のみに存在します。通常の HTML ページでは許可されていません。理由についてはソースをお読みください。
+ +

Mozilla の canvas は {{domxref("CanvasRenderingContext2D", "drawWindow()", "drawWindow()")}} メソッドで拡張できます。このメソッドは DOM window の中身のスナップショットを canvas に描画します。以下に例を示します。

+ +
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+ +

上記の例では、現在のウィンドウの、左上から (0, 0, 100, 200) 座標にある四角形の中身を、黒色背景の canvas に描き込みます。 遅くなりますが、 "rgba(255, 255, 255, 0)" と色を指定すれば、透過背景の上に中身を描画することになります。

+ +

このメソッドにより、隠し IFRAME に任意の内容 (たとえば、CSS でスタイル付けされた HTML テキストや SVG) を入れて、その内容を canvas に描画することも可能です。その場合、現在の変形にしたがって、拡大縮小・回転が行われます。

+ +

Ted Mielczarek の tab preview 拡張では、 Web ページのサムネイルを提供するために chrome の中でこのテクニックを使われています。ソースコードを参照してみてください。

+ +
注記: Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
+ +

関連情報

+ + diff --git a/files/ja/web/api/canvas_api/index.html b/files/ja/web/api/canvas_api/index.html new file mode 100644 index 0000000000..0185d19c40 --- /dev/null +++ b/files/ja/web/api/canvas_api/index.html @@ -0,0 +1,137 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - Graphics + - Overview + - Reference + - キャンバス + - グラフィック + - 概要 +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Canvas API は JavaScript と HTML の {{HtmlElement("canvas")}} 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。

+ +

Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。

+ +

基本的な例

+ +

この単純な例は、キャンバス上に緑の四角形を描きます。

+ +

HTML

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

JavaScript

+ +

{{domxref("Document.getElementById()")}} メソッドで、 HTML の <canvas> 要素への参照を取得します。次に、 {{domxref("HTMLCanvasElement.getContext()")}} メソッドで要素のコンテキストを取得します。 — ここに描画されたものが表示されます。

+ +

実際の描画は {{domxref("CanvasRenderingContext2D")}} インターフェイスを用いて行われます。 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} プロパティは四角形を緑にします。 {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} メソッドはこれを左上から (10, 10) の位置で、幅を150単位、高さを100単位の寸法を与えます。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+
+ +

結果

+ +

{{ EmbedLiveSample('Basic_example', 700, 180) }}

+ +

リファレンス

+ +
+ +
+ +
+

メモ: WebGLRenderingContext に関するインターフェイスは、WebGL に掲載しています。

+
+ +

{{domxref("CanvasCaptureMediaStream")}} は関連するインターフェイスです。

+ +

ガイドとチュートリアル

+ +
+
Canvas チュートリアル
+
<canvas> の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。
+
HTML5 Canvas Deep Dive
+
Canvas API および WebGL の実践的な書籍規模の入門です。
+
Canvas Handbook
+
Canvas API の手軽なリファレンス。
+
デモ: 簡単な ray-caster
+
キャンバスを用いたレイトレーシングアニメーションのデモ。
+
canvas を使用した動画の操作
+
{{HTMLElement("video")}} と {{HTMLElement("canvas")}} を組み合わせて、動画データをリアルタイムに操作します。
+
+ +

ライブラリ

+ +

Canvas API は非常に強力ですが、利用するのは単純とは限りません。以下に挙げたライブラリは、キャンバスベースのプロジェクトの作成をより速くより手軽にできるようにします。

+ + + +
+

メモ: WebGL を使用する 2D および 3D のライブラリについては WebGL API を参照してください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ +

Mozilla アプリケーションは <canvas> の対応を Gecko 1.8 (Firefox 1.5) から始めました。この要素はもともと Apple が OS X Dashboard や Safari のために導入したものでした。 Internet Explorer は <canvas> をバージョン9から対応しており、それ以前のバージョンの IE では、ページに効率的に <canvas> の対応を追加するために Google の Explorer Canvas プロジェクトによるスクリプトを利用することができます。 Google Chrome や Opera 9 も <canvas> に対応しています。

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html b/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..65e56da8d4 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,260 @@ +--- +title: Compositing example +slug: Web/API/Canvas_API/Tutorial/Compositing/Example +tags: + - Canvas + - Example + - Graphics + - HTML + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

This sample program demonstrates a number of compositing operations. The output looks like this:

+ +

{{EmbedLiveSample("Compositing_example", "100%", 7250)}}

+ +

Compositing example

+ +

This code sets up the global values used by the rest of the program.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'デフォルトの設定です。新たな図形をすでにあるCanvasの内容の上に描きます。',
+'新たな図形は、その図形と描画先 Canvas の内容が重なり合う部分のみが描かれます。重なり合わない領域は透明になります。',
+'新たな図形は、その図形と描画先 Canvas の内容と重なり合わない部分のみが描画されます。他の領域は透明になります。',
+'新たな図形は、その図形と描画先 Canvas の内容と重なり合う部分のみが描かれます。',
+'新たな図形は、描画先 Canvas の内容の背後に描かれます。',
+'描画先 Canvas の内容は、新たな図形と重なり合う部分だけが残ります。新たな図形も含めて、他の領域は透明になります。',
+'描画先 Canvas の内容は、新たな図形と重なり合わない部分だけが残ります。新たな図形も含めて、他の領域は透明になります。',
+'描画先 Canvas の内容は、新たな図形と重なり合う部分だけが残ります。新たな図形は、その背後に描かれます。',
+'新たな図形と描画先 Canvas の内容が重なる部分は、カラー値が加算されます。',
+'新たな図形だけが描かれて、描画先 Canvas の内容は透明になります。',
+'新たな図形と描画先 Canvas の内容が重なり合う部分は透明になります。他の領域はともに描画されます。',
+'新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値が乗算されます。その結果、各ピクセルのカラーは暗くなります。',
+'新たな図形のピクセルと対応する描画先 Canvas のピクセルとカラー値をそれぞれ一旦反転して、乗算したうえで、改めて反転します。その結果、各ピクセルのカラーは明るくなります (multiply の逆)。',
+'multiply と screen を組み合わせます。新たな図形のピクセルより対応する描画先 Canvas のピクセルが、それぞれ暗いときは暗くし、明るければ明るくします。',
+'新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値を比べて、それぞれ暗い方のピクセルを残します。',
+'新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値を比べて、それぞれ明るい方のピクセルを残します。',
+'描画先 Canvas の内容のピクセルのカラー値を、対応する新たな図形の反転したピクセルのカラー値でそれぞれ除算します。',
+'描画先 Canvas の内容のピクセルの反転したカラー値を、対応する新たな図形のピクセルのカラー値でそれぞれ除算し、改めて各ピクセルのカラー値を反転させます。',
+'multiply と screen を組み合わせます。描画先 Canvas のピクセルより対応する新たな図形のピクセルが、それぞれ暗いときは暗くし、明るければ明るくします (overlay と比較対象が逆)。',
+'hard-light の効果を柔らかくしたカラー合成になります。純粋な黒と白は、真っ黒や真っ白にはなりません。',
+'新たな図形のピクセルと対応する描画先 Canvas のピクセルとカラー値の差の絶対値をそれぞれのピクセルに定めます。',
+'difference よりもコントラストを弱めたカラー合成になります(いわゆる「除外」)。',
+'描画先 Canvas の内容のピクセルの輝度と彩度は保ち、対応する新たな図形のピクセルの色相をそれぞれ与えます。',
+'描画先 Canvas の内容のピクセルの輝度と色相は保ち、対応する新たな図形のピクセルの彩度をそれぞれ与えます。',
+'描画先 Canvas の内容のピクセルの輝度は保ち、対応する新たな図形のピクセルの色相と彩度をそれぞれ与えます。',
+'描画先 Canvas の内容のピクセルの色相と彩度は保ち、対応する新たな図形のピクセルの輝度をそれぞれ与えます。'
+          ].reverse();
+var width = 320;
+var height = 340;
+
+ +

Main program

+ +

When the page loads, this code runs to set up and run the example:

+ +
window.onload = function() {
+    // lum in sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // resize canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

And this code, runComposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts.

+ +
function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+        var canvas = document.createElement("canvas");
+        canvas.style.background = "url("+op_8x8.data+")";
+        canvas.style.border = "1px solid #000";
+        canvas.style.margin = "10px";
+        canvas.width = width/2;
+        canvas.height = height/2;
+        var ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+        dd.appendChild(canvas);
+        dl.appendChild(dd);
+    }
+};
+
+ +

Utility functions

+ +

The program relies on a number of utility functions.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/ja/web/api/canvas_api/tutorial/compositing/index.html b/files/ja/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..723509fa9c --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,113 @@ +--- +title: 合成とクリッピング +slug: Web/API/Canvas_API/Tutorial/Compositing +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

これまでの例はすべて、常にほかの図形より手前に図形が描かれました。これはほとんどの状況において十分以上ですが、合成した図形を構築する順序を制限します。しかし、globalCompositeOperation プロパティを設定すると、この動作を変更できます。さらに clip プロパティで、図形の不要な部分を隠すことができます。

+
+ +

globalCompositeOperation

+ +

新しい図形を既存の図形の後ろに描くだけでなく、特定の領域を覆う、一部分を canvas から消去する ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} メソッドのように矩形に限定されません) などが可能です。

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
これは、新しい図形を描くときに適用する合成処理の種類を設定します。type は、12種類の合成処理から使用するものを特定する文字列です。
+
+ +

以下の例のコードについては、合成のサンプルをご覧ください。

+ +

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

クリッピングパス

+ +

クリッピングパスは通常の canvas の図形に似ていますが、図形の不要な部分を隠すマスクとして作用します。これを右の画像で視覚化しました。赤い星型の図形は、クリッピングパスです。このパスの外側にあるものはすべて、canvas で描画されません。

+ +

クリッピングパスと先ほどの globalCompositeOperation プロパティを比較すると、おおむね同じ効果をもたらす合成モードとして source-in と source-atop の 2 つがあることがわかります。これら 2 つとのもっとも重要な違いは、クリッピングパスは実際に canvas に描かれるものではないことと、クリッピングパスは新しい図形による影響を受けないことです。これは制限された領域に複数の図形を描くという、クリッピングパスの目標を表しています。

+ +

図形を描く の章では stroke() および fill() メソッドのみ言及しましたが、パスを扱う第 3 のメソッドとして clip() があります。

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
現在構築しているパスを、現在のクリッピングパスに変換します。
+
+ +

closePath() の代わりに clip() を使用して、パスの輪郭を描いたり塗りつぶすのではなく、パスを閉じてクリッピングパスに変換します。

+ +

デフォルトで {{HTMLElement("canvas")}} 要素には、canvas 自体とまったく同じサイズのクリッピングパスが存在します。言い換えると、クリッピングは行われません。

+ +

clip の例

+ +

この例では、ランダムな星の集団の描画先を特定の領域に制限するために、円形のクリッピングパスを使用しています。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0,0,150,150);
+  ctx.translate(75,75);
+
+  // 円形のクリッピングパスを作成
+  ctx.beginPath();
+  ctx.arc(0,0,60,0,Math.PI*2,true);
+  ctx.clip();
+
+  // 背景を描く
+  var lingrad = ctx.createLinearGradient(0,-75,0,75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75,-75,150,150);
+
+  // 星を描く
+  for (var j=1;j<50;j++){
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75-Math.floor(Math.random()*150),
+                  75-Math.floor(Math.random()*150));
+    drawStar(ctx,Math.floor(Math.random()*4)+2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx,r){
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r,0);
+  for (var i=0;i<9;i++){
+    ctx.rotate(Math.PI/5);
+    if(i%2 === 0) {
+      ctx.lineTo((r/0.525731)*0.200811,0);
+    } else {
+      ctx.lineTo(r,0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

コードの始めの数行で、背景として canvas と同サイズの黒い背景を描いて、原点を中央に移動します。次に、円弧を描いて clip() を呼び出すことで、円形のクリッピングパスを作成します。クリッピングパスは、canvas の状態として保存されるもののひとつでもあります。元のクリッピングパスを維持したい場合は、新しいクリッピングパスを作成する前に保存した canvas の状態があるとよいでしょう。

+ +

クリッピングパスを作成した後に描いたものはすべて、パスの内部にあるものだけが見える状態になります。これは、次に描いている線形グラデーションで明らかです。この後に独自の drawStar() 関数を使用して、位置や大きさがランダムな星を 50 個描きます。星もまた、クリッピングパスの内部で定義されたものしか見えません。

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/ja/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..4aac5d086e --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,101 @@ +--- +title: ヒット領域とアクセシビリティ +slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +tags: + - Canvas + - Graphics + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
{{HTMLElement("canvas")}} 自体は単なるビットマップであり、描かれているオブジェクトに関する情報は提供しません。canvas の内容物は、セマンティック HTML のようなアクセシビリティ機能に公開されません。通常、アクセシブルなウェブサイトやアプリでは、canvas の使用を避けるべきでしょう。以下のガイドラインは、canvas をよりアクセシブルにする助けになります。
+ +

フォールバックコンテンツ

+ +

<canvas> ... </canvas> タグの内部にあるコンテンツは、canvas のレンダリングをサポートしないブラウザ向けのフォールバックコンテンツとして使用できます。また支援技術 (スクリーンリーダーなど) ユーザーに対しても、タグ内のサブ DOM を読み上げたり対話することができますので、とても役に立ちます。この方法を示すよい例が html5accessibility.com にあります:

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

Steve Faulkner による、この例を NVDA がどのように読み上げるかを示した動画 もご覧ください。

+ +

ARIA ルール

+ +

Accessible Rich Internet Applications (ARIA) は、障がいがある人たちに対してウェブコンテンツやウェブアプリをよりアクセシブルにするための手段を定義しています。canvas 要素の振る舞いや目的を説明するために、ARIA 属性を使用できます。詳しくは ARIA や ARIA techniques をご覧ください。

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

ヒット領域

+ +

canvas 上の特定の領域内にマウス座標が存在するかは、解決する価値がある一般的な問題です。ヒット領域 API を使用して canvas 内の領域を定義することができます。また、canvas 上のインタラクティブコンテンツをアクセシビリティツールに公開する機能もあります。これによりヒット検出が容易になり、イベントを DOM 要素に送ることができます。この API には、以下の3つのメソッドがあります (これらは現行のウェブブラウザーでまだ実験的です。ブラウザー実装状況を確認してください)。

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
canvas にヒット領域を追加します。
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
特定の id を持つヒット領域を、canvas から削除します。
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
すべてのヒット領域を canvas から削除します。
+
+ +

たとえば以下のように、パスにヒット領域を追加して、その領域にマウスがヒットしたかを判断するために {{domxref("MouseEvent.region")}} を確認できます。

+ +
<canvas id="canvas"></canvas>
+<script>
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: "circle"});
+
+canvas.addEventListener("mousemove", function(event) {
+  if(event.region) {
+    alert("hit region: " + event.region);
+  }
+});
+</script>
+ +

addHitRegion() メソッドには、イベントを要素 (canvas の子孫要素) へ送るための control オプションがあります:

+ +
ctx.addHitRegion({control: element});
+ +

これはたとえば、{{HTMLElement("input")}} 要素へイベントを送るのに有用です。こちらの codepen demo もご覧ください。

+ +

フォーカスリング

+ +

キーボードで操作するとき、フォーカスリングはページ上のナビゲーションを支援するために役に立つインジケーターです。canvas の描画物にフォーカスリングを描くために、drawFocusIfNeeded プロパティを使用できます。

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
指定した要素にフォーカスがあるとき、このメソッドは現在のパスの周囲にフォーカスリングを描きます。
+
+ +

また、たとえばフォーカスがある場合に要素をスクリーン上に見せるために、scrollPathIntoView() メソッドを使用できます。

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
現在のパスまたは指定したパスを表示するようにスクロールします。
+
+ +

関連情報

+ + + +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/index.html b/files/ja/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..b1045fd484 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,72 @@ +--- +title: Canvas チュートリアル +slug: Web/API/Canvas_API/Tutorial +tags: + - Canvas tutorial + - HTML + - HTML5 + - 'HTML:Canvas' + - Tutorials +translation_of: Web/API/Canvas_API/Tutorial +--- +

<canvas> はスクリプト(一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な（またはあまり簡単ではない）アニメーションに使うことができます。右の画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

+ +

<canvas> は Apple によって Mac OS X の Dashboard のために初めて導入され、後に Safari に実装されました。Firefox 1.5 のような Gecko 1.8 ベースのブラウザもこの新しい要素をサポートしてます。<canvas> 要素は HTML 5 としても知られる WhatWG Web applications 1.0 仕様の一部分です。

+ +

このチュートリアルでは、あなたの HTML ページに <canvas> 要素を導入する方法を説明します。提供された例は、<canvas> で出来ることの、いくつかの明確なアイデアを与え、それをあなた自身で実装できるようにするために使うことができます。

+ +

始める前に

+ +

<canvas> を使うことはとても難しいわけではありませんが、HTML と JavaScript の基本的な理解が必要です。

+ +

上述のように、<canvas> 要素は全てのモダンブラウザでサポートされているわけではないため、例を見るには Firefox 1.5 か他の最近の Gecko ベースブラウザ、Opera 9、もしくは最近のバージョンの Safari が必要になるでしょう。

+ +

このチュートリアルの一覧

+ +
    +
  1. 基本的な使いかた
    2. +
  2. 図形を描く
    3. +
  3. 画像を使う
    4. +
  4. スタイルと色を適用する
    5. +
  5. 変形
    6. +
  6. 合成
    7. +
  7. 基本的なアニメーション
    8. +
  8. canvasの最適化
    9. +
+ +

関連情報

+ +
    +
  1. Canvas トピックのページ
    2. +
  2. canvas を使って図形を描く
    3. +
  3. Canvas の実例
    4. +
  4. canvas への文字の描画
    5. +
+ +

canvas に関する外部情報（日本語）

+ + + +

canvas に関する外部情報（英語）

+ +
+ +
+ +
{{Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage")}}
-- cgit v1.2.3-54-g00ecf