如何在画布上添加图像

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用HTML中的新canvas元素。

我只是想将图像添加到画布，但是由于某种原因它不起作用。

我有以下代码：

<canvas id="viewport"></canvas>

canvas#viewport { border: 1px solid white; width: 900px; }

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

图片存在，并且没有JavaScript错误。该图像只是不显示。

这一定是我错过的非常简单的事情…

回答：

也许您应该等到图像加载后才能绘制图像。尝试以下方法：

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

即在图像的onload回调中绘制图像。

以上是 如何在画布上添加图像 的全部内容， 来源链接： utcz.com/qa/410811.html

回到顶部