1

Canvas 要素を使用して、三角形のイメージ マスクを作成しました。マウスオーバーしたときにこの三角形の一番下の行に表示したいテキストのフィールドがあります。ホバリング時にのみテキストを表示する方法がわかりません。

私はこれの初心者です...どんな助けも感謝します!

これは私がこれまでに得たコードです:

HTML コード:

<body>
    <a href="#"><canvas id="canvas" width=300 height=300></canvas></a>
  </body>

Javascript:

function masks() {

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
        draw(ctx,img,"Hello!");
    }
    img.src="canvas01.png";
    function draw(ctx,img,text){
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width, canvas.height);            
        ctx.lineTo(0, canvas.height);
        ctx.closePath();                                          
        ctx.clip();                        
        ctx.drawImage(img,0,0);
        if(text){
            ctx.fillStyle = "#f30";
            ctx.fillRect(0,canvas.height-20,canvas.width,20);
            ctx.fillStyle = "black";
            ctx.font="14pt Verdana";
            var textWidth=ctx.measureText(text).width;
            ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3); 
        }

    }

};
4

1 に答える 1