javascript - 図形内の境界テキスト

Question

キャンバスには背景の形とテキストがあり、

overflow:hidden;css からテキストへのようなものをどのようにエミュレートしますか?

基本的に、テキストが形状からはみ出しており、マスク/クリップしようとしていますが、解決策が見つかりませんでした。何か案は？

Answer 1

新しい背景キャンバスを作成し、その幅と高さを目的のバウンディング ボックスの幅と高さに設定し、その上にテキストを描画してから、背景キャンバスをプライマリ キャンバスに描画することができます。

背景キャンバスを作成するには、次のようにします

var tempCanvas = document.createElement('canvas');

ただし、他の DOM ノードには接続しないでください。次に、キャンバスの.widthandを設定し、そのコンテキストを取得して描画できます。.height

表示されているキャンバスに戻すには、バックグラウンド キャンバスをメイン キャンバス コンテキストの drawImage に渡すだけです。

mainCanvas.getContext('2d').drawImage(tempCanvas, x, y);