javascript - 在鼠标悬停在 Canvas 上显示文本

Question

目前，我正在处理下面的示例 https://codepen.io/jkiss/pen/OVEeqK 这里我更改了代码以在 Canvas 上显示

 var canvas = document.getElementById('nokey');
   var ctx = canvas.getContext('2d');
  ctx.fillText("StacOverFlow",30,80);

但是我无法使用上面的代码显示文本。任何人都可以帮助显示文本。

Answer 1

在你的例子中 https://codepen.io/jkiss/pen/OVEeqK ，您必须添加一些代码来渲染函数，如下所示:

实例: https://codepen.io/siamand/pen/BdPBMq

// Render
function render(){
    ctx.clearRect(0, 0, can_w, can_h);

    renderBalls();

    renderLines();

    updateBalls();

    addBallIfy();

    addCustomStuff();


    window.requestAnimationFrame(render);
}

function addCustomStuff(){
   //if(mouse_in){  // IF condition for show text when mouse_in
      ctx.fillStyle = 'red';
      ctx.fillText("StackOverflow",mouse_ball.x,mouse_ball.y);
   //}
}