Question

我试图通过update（）和setInterval（）函数在屏幕上显示简单文本，但它不起作用。请注意，我创建了一个画布，我希望在其上显示文本。 请检查以下代码。

var canvas, canvasContext;

window.onload = function() {
  canvas = document.getElementById('theCanvas');
  canvasContext = canvas.getContext('2d');

  var fps = 30;
  setInterval(update, 1000 / fps);

}

function update() {
  drawText();
}

function drawText() {
  canvasContext.fillStyle = 'black';
  canvasContext.font = 'bold 40px Monospace';
  canvasContext.fillText('POC ......', 150, 150);
}

#canvasHolder {
  position: absolute;
  left: 0px;
  top: 0px;
}
#theCanvas {
  background-color: lightgreen;
  width: 100pc;
  height: 100pc;
}

<div id="canvasHolder">
  <canvas id="theCanvas"></canvas>
</div>

Answer 1

问题是画布正在拉伸以填充元素。画布本身和画布元素都有一个大小。如果未指定画布的大小（尚未指定），则默认为300x150。当元素和画布的大小不匹配时，画布内容将缩放以适合元素。因此正在绘制文本，它只是非常大;滚动到右边和下边，你会发现它。

我的猜测是你的画布和元素的大小相同。如果是这样，您需要设置画布的大小。您可以使用width元素上的height和canvas属性执行此操作，但这些值将以像素为单位，而不是像CSS中的picas。因此，我们通过获取元素的计算宽度和高度来动态地执行它（因为它们将以像素为单位返回给我们），然后为画布的width和height属性设置这些值：

// Set the canvas size to match the element size
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

更新了代码段：

var canvas, canvasContext;

window.onload = function() {
  canvas = document.getElementById('theCanvas');
  // Set the canvas size to match the element size
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  canvasContext = canvas.getContext('2d');
  canvasContext.canvas.width = canvas.width;
  canvasContext.canvas.height = canvas.height;

  var fps = 30;
  setInterval(update, 1000 / fps);
};

function update() {
  drawText();
}

function drawText() {
  canvasContext.fillStyle = 'black';
  canvasContext.font = 'bold 40px Monospace';
  canvasContext.fillText('POC ......', 150, 150);
}

#canvasHolder {
  position: absolute;
  left: 0px;
  top: 0px;
}
#theCanvas {
  background-color: lightgreen;
  width: 100pc;
  height: 100pc;
}

<div id="canvasHolder">
  <canvas id="theCanvas"></canvas>
</div>

请注意，现在，您每次只是在同一位置重新绘制它，但我认为移动它是您的下一个任务......

Answer 2

文本已经呈现，但如果您想为文本设置动画，那么您必须更改绘图功能，因为每次您在同一位置绘制文本时都会 -

function drawText() {
  canvasContext.fillStyle = 'black';
  canvasContext.font = 'bold 40px Monospace';
  canvasContext.fillText('POC ......', 150, 150); //here you have given the fixed position.
}

并且在将文本渲染到新位置之前必须清除画布 -

请参阅 -

How to clear the canvas for redrawing

无法在javascript中绘制文本

2 个答案: