29541


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

[code]

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

出力結果

[code]

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

* * *

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


CC BY-SA 3.0
2016-10-13T03:21:39.897
29509
2016-10-14T02:13:07.240
2016-10-14T01:58:55.097
7886
7886
question
html5-canvas
HTML5 canvasで、テキストではなく、リンクテキストを描画したい


望んでいることは出来ないんじゃないか？……と思って調べてみました。  
[本家SOの方に同じ質問をしている方がいた](https://stackoverflow.com/questions/6215841)のでリンクしておきます。

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

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

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-10-14T02:13:07.240
29541
2016-10-14T02:13:07.240
2017-05-23T12:38:55.250
-1
29509
answer