From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../addhitregion/index.html | 171 +++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html (limited to 'files/ja/web/api/canvasrenderingcontext2d/addhitregion') diff --git a/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html b/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html new file mode 100644 index 0000000000..9321189788 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html @@ -0,0 +1,171 @@ +--- +title: CanvasRenderingContext2D.addHitRegion() +slug: Web/API/CanvasRenderingContext2D/addHitRegion +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/addHitRegion +--- +
{{APIRef}} {{obsolete_header}}
+ +

{{domxref("CanvasRenderingContext2D")}} の addHitRegion() メソッドは、ビットマップにヒット領域を追加します。

+ +

Canvas のヒット領域で、ヒットの検出が簡単になります。これらによってイベントを DOM 要素にルートでき、ユーザーは canvas を見なくても操作できるようになります。

+ +

構文

+ +
void ctx.addHitRegion(options);
+
+ +

オプション

+ +

options 引数は任意です。設定する場合は、次のプロパティを含む {{jsxref("Object")}} を指定します。

+ +
+
path
+
ヒット領域をあらわす {{domxref("Path2D")}} オブジェクト。指定されない場合は現在のパスが使われます。
+
fillRule
+
ある点がヒット領域の中か外かを判断するアルゴリズムです。
+ 取りうる値は次の通りです。 + +
+
id
+
ヒット領域を後で参照するための ID。 ID はイベントなどで使われます。
+
parentID
+
親ヒット領域の ID。 cursor の継承やアクセシビリティツールによるナビゲーションで利用されます。
+
cursor
+
この領域にマウスが重なったときに使う {{cssxref("cursor")}} (初期値は inherit)。親ヒット領域があればそこから継承し、なければ、 canvas 要素の cursor から継承します。
+
control
+
イベントがルートされる要素 (canvasの子孫)。初期値は null。
+
label
+
control がない場合にヒット領域の説明として使われるテキストラベル (アクセシビリティツール向け)。初期値はnull。
+
role
+
control がない場合にヒット領域の挙動を説明する ARIA ロール (アクセシビリティツール向け)。初期値は null。
+
+ +

例

+ +

addHitRegion メソッドの使用

+ +

これは、 addHitRegion メソッドを使った簡単な例です。

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+canvas.addEventListener('mousemove', function(event) {
+  if(event.region) {
+    alert("痛っ、僕の目だよ");
+  }
+});
+
+ctx.beginPath();
+ctx.arc(100, 100, 75, 0, 2 * Math.PI);
+ctx.lineWidth = 5;
+ctx.stroke();
+
+// 目
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI);
+ctx.arc(130, 80, 10, 0, 2 * Math.PI);
+ctx.fill();
+ctx.addHitRegion({id: "eyes"});
+
+// Mouth
+ctx.beginPath();
+ctx.arc(100, 110, 50, 0, Math.PI);
+ctx.stroke();
+
+ +

下のコードを編集すると変更が即座に canvas に反映されます。 (もし、スマイリーが不完全な状態で表示されている場合には、現在のブラウザーがヒット領域に対応しているかどうかをブラウザー互換性表を確認してください。設定で有効化する必要があるかもしれません。)

+ + + +

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

+ +

仕様書

+ +

Canvas のヒット領域は、 WHATWG Living Standard から削除されていますが、将来の標準化についての議論は続いています。詳しくは https://github.com/whatwg/html/issues/3407 を参照してください。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.CanvasRenderingContext2D.addHitRegion")}}

+ +

関連情報

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