0

現状
・テキストなので、リンクを読み込むと、そのまま表示されてしまいます

var ctx = document.getElementById('canvasのID名');  
ctx.fillText(text, x, y);

出力結果

<a href="/">スタック・オーバーフロー</a>

質問
・aタグを(リンク機能を保持したまま)canvasへ描画するためにはどうすれば良いでしょうか?
※描画後、canvas機能でアニメーション表示させる予定

7
  • 1
    要素をcanvasに描画するのではなく、position: absoluteで上に重ねるべきではないでしょうか
    – pgrho
    Commented 2016年10月13日 3:42
  • 2
    画像内にどうしても埋め込みたいなら、canvasの画像をimgに突っ込んでclickable mapを作成するのでは駄目ですか?
    – user10259
    Commented 2016年10月13日 4:23
  • 「上に重ねるべき」の意味が分からないのですが、HTML要素(aタグ)はcanvasへ描画出来ないのでしょうか? また、clickable mapでは都合が悪いです。 aタグを、fillTextで描画した時のように、canvas要素として操作したいので…
    – re9
    Commented 2016年10月14日 1:52
  • @re9 もちろんcanvasa要素のtextContentを描画したりマウスイベントを拾って様々な処理を行うことは可能です。しかしaの持つ疑似クラスやタイトル、さらにはコンテキストメニューやアクセシビリティなどを考えるとcanvasに描画したうえでエミュレートするよりも、実際のa要素としてcanvasに重ねて表示した方が簡潔で機能性も高くなるのではないかと思います。
    – pgrho
    Commented 2016年10月14日 2:25
  • 1
    canvasはただのビットマップ画像なので、描画した図形やテキストをリンクにするというのはできません。これに対してSVGであれば描画した要素を個別に認識できるので、イベントを拾ったり個別にアニメーションしたりもできます。<a>要素も使えるのでリンクを埋め込む事もできます。もし他の要件を満たせるようであれば、SVGに置き換える事を検討してみては如何でしょうか。
    – tag1216
    Commented 2016年10月14日 3:21

1 件の回答 1

2

望んでいることは出来ないんじゃないか?……と思って調べてみました。
本家SOの方に同じ質問をしている方がいたのでリンクしておきます。

要するに実現している内容はclickable mapと同じです。
キャンバスの上に動いているマウスの座標を取得して、
指定座標内でクリックされたら遷移するものです。

WEB以外の表示でリンクしたい……は出来ません。
結局、出力は画像なので、出力する画像フォーマットにリンクの機能がないとリンクは出来ないです。

<html>
<head>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var ctx;
        var linkText = "http://stackoverflow.com";
        var linkX = 5;
        var linkY = 15;
        var linkHeight = 10;
        var linkWidth;
        var inLink = false;

        // draw the balls on the canvas
        function draw() {
            canvas = document.getElementById("myCanvas");
            // check if supported
            if (canvas.getContext) {

                ctx = canvas.getContext("2d");

                //clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                //draw the link
                ctx.font = '10px sans-serif';
                ctx.fillStyle = "#0000ff";
                ctx.fillText(linkText, linkX, linkY);
                linkWidth = ctx.measureText(linkText).width;

                //add mouse listeners
                canvas.addEventListener("mousemove", on_mousemove, false);
                canvas.addEventListener("click", on_click, false);

            }
        }

        //check if the mouse is over the link and change cursor style
        function on_mousemove(ev) {
            var x, y;

            // Get the mouse position relative to the canvas element.
            if (ev.layerX || ev.layerX == 0) { //for firefox
                x = ev.layerX;
                y = ev.layerY;
            }
            x -= canvas.offsetLeft;
            y -= canvas.offsetTop;

            //is the mouse over the link?
            if (x >= linkX && x <= (linkX + linkWidth) && y <= linkY && y >= (linkY - linkHeight)) {
                document.body.style.cursor = "pointer";
                inLink = true;
            }
            else {
                document.body.style.cursor = "";
                inLink = false;
            }
        }

        //if the link has been clicked, go to link
        function on_click(e) {
            if (inLink) {
                window.location = linkText;
            }
        }
    </script>
</head>
<body onload="draw()">
    <center>
        <canvas id="myCanvas" width="200" height="200" style="border-style:solid;border-width:1px">Canvas not supported.</canvas>
    </center>
</body>
</html>
1
  • 「キャンバスの上に動いているマウスの座標を取得して、指定座標内でクリックされたら遷移する」って方法しかないんですね。リンク提示ありがとうございました。参考になりました
    – re9
    Commented 2016年10月15日 2:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。