文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== Canvas内のテキストをクリックして,新規ページを開く ====== Canvasは視覚表現にはとても便利ですが,例えばcanvas内のオブジェクトをクリックすることで別ページに飛ぶ.といったhtml特有の振る舞いをさせるためには少し手間をかけないといけません.通常はhtml要素でまかなえることは極力html要素に実装するのがよいですが,canvas内のオブジェクトをhtmlのhref要素のように振る舞わせたい場合もあるでしょう.このページではcanvas上に描画された任意のテキストをクリックすることで,指定したページを開くコードを記述します. 具体的には任意のテキスト上にマウスが乗っているか,いないかを判別するための関数を準備し,それを活用することで上記機能は実現できます. <file> function isMouseInsideText(_message, _messageX, _messageY) { // テキストの横幅を計算 const messageWidth = textWidth(_message); // アセンド,ディセンドの関係については以下のURLを参照のこと // https://qiita.com/bit0101/items/dc051015e458eb1ff2ab const messageTop = _messageY - textAscent(); const messageBottom = _messageY + textDescent(); if( mouseX > _messageX && mouseX < _messageX + messageWidth && mouseY > messageTop && mouseY < messageBottom ){ return true; } else{ return false; } } </file> ===== 参考 ===== * https://happycoding.io/examples/p5js/input/clickable-text /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/tips/canvas内のテキストクリックで新規ページ.txt 最終更新: 2021/06/29 14:19by baba