Question

目前，我正在开展以下示例https://codepen.io/jkiss/pen/OVEeqK 在这里，我改变了要在画布上显示的代码

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

Answer 2

您需要添加以下HTML代码：

<canvas id="nokey" width="800" height="800"> Your Browser Don't Support Canvas, Please Download Chrome ^_^`` </canvas>

这是因为当您致电var canvas = document.getElementById('nokey');时，您正试图获取名为＆＃39; nokey＆＃39;在你的例子中。

Answer 3

您还需要使用ctx.fillStyle和ctx.font来在画布上显示字体。

＆＃13;

var canvas = document.getElementById('nokey'),
  can_w = parseInt(canvas.getAttribute('width')),
  can_h = parseInt(canvas.getAttribute('height')),
  ctx = canvas.getContext('2d');

var ctx = canvas.getContext('2d');
ctx.fillStyle = "blue";
ctx.font = "bold 16px Arial";
ctx.fillText("StackOverFlow", 30, 80);

＆＃13;

<canvas id="nokey" width="800" height="800">
    Your Browser Don't Support Canvas, Please Download Chrome ^_^``
</canvas>

＆＃13;

在鼠标悬停的画布上显示文本

3 个答案: