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);
}
}
};