.AdHitRegion（）がChromeで動作しない

Question

私は最新のChromeバージョンを持っており、MDNで述べたように、.addHitRegion()メソッドをサポートする必要があることが仕様でわかります。何らかの理由でUncaught TypeError: context.addHitRegion is not a functionエラーが発生します。

私のコードは次のと同じくらい簡単です：

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
context.beginPath(); 
context.rect(10,10,100,100); 
context.fill(); 
context.addHitRegion({'id': 'The First Button', 'cursor': 'pointer'}); 

私はそれを修正するにはどうすればよいですか？

Answer 1

だからあなたはあなたがリンクされたページの下部にある互換性の表から、ここで

を実験的なフラグを設定する必要があります。

この機能は、機能フラグの後ろにあります。これを有効にするには、フラグ ExperimentalCanvasFeaturesをtrueに設定します。

実験キャンバス機能を有効にするには、「chrome：// flags」を参照し、「実験キャンバス機能を有効にする」をオンにして、再起動します。お使いのブラウザで、ここ

Answer 2

ゴー：クローム：//フラグ

、その後

、それを有効にするにはtrueにフラグExperimentalCanvasFeaturesを設定します。

Answer 3

他の回答として、これをフラグで有効にすることはできますが、ユーザーに同じことをするように要求することはできません。サポートはいくつかのブラウザに限られています。私はそのために他の解決策を探してみることをお勧めします - ここにいくつか挙げています：

ノッチの良いアプローチはPath2D objectsです。ヒットシェイプを定義する上で同じ柔軟性を提供します。パスオブジェクトをとるisPointInPath()でこれらを使用してください。それぞれのパスは、テストする位置を使用してループする配列に格納します。残念ながら、これはいくつかのブラウザに限られていますが、少なくともpoly-fill such as thisを使用して、それをいくつか拡張することができます（リンクの注意事項を参照してください）。

おそらくサポートと可用性に関するより良い選択肢ともう少し作業が必要なものは、コンテキスト自体でテストする各単一パスを再構築し、上記のようにisPointInPath()を使用してマウスが位置はそのパスの内側です。

形状が長方形や円などの単純な場合は、簡単な数学的なテストを行うことができます。