html - 部分のみを非表示/表示するには、html5 キャンバスを複数の領域にどのように分割しますか?

Question

完全な個々のチャートダイアグラムを作成するために長方形を手動で作成するキャンバスがあります。塗り絵や文字入れなど…

特定の領域を非表示にして再び表示するように簡単に指示するにはどうすればよいですか?

キャンバスを何らかの形で領域に分割するオブジェクト指向のアプローチはありますか?

Answer 1

あなたが望むように機能する解決策はないと思います。Canvas要素は領域を追跡しません.DOMから知っているような要素です. あなたができることがいくつかあります：

• svg の使用を検討してください。SVG は html のように機能し、javascript/dom および css を介して操作できます。
• 表示したい要素でキャンバス全体を再描画します。これを手動で行う必要はありません。paper.js や kinetic.js などのフレームワークが役立ちます。これらのフレームワークには、レイヤーのような機能もあります。
• canvas 要素には API 関数 getImageData と putImageData があります。これらの関数を使用すると、キャンバスの領域を JavaScript 配列に保存し、キャンバス描画関数を使用してその領域を空白にすることができます。必要に応じて、putImageData 関数を使用して領域を再描画できます。