Question

我一直在试图弄清楚如何在画布上添加图片，但我尝试的一切都没有用。有什么想法吗？

HTML：

<body>
<canvas id="gl-canvas" width="800" height="600" style="float:left"></canvas>

我有一个单独的JS文件，但我不认为有必要在此处添加它，因为我无法弄清楚如何正确应用该函数。

我一直在尝试应用类似的东西：

var canvas = document.getElementById('gl-canvas'),
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, 100, 100);
  }
}

我不确定是否必须为'2d'元素创建变量。想法？

PS。这是我的第一个问题，所以，抱歉，如果我做错了什么。谢谢你的帮助！

Answer 1

您需要使用appendChild将图像附加到画布：

var canvas = document.getElementById('gl-canvas'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  var base_image = new Image();
  base_image.src = 'http://via.placeholder.com/350x150';
  base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
    canvas.appendChild(base_image);
  }
}

<canvas id="gl-canvas" width="800" height="600" style="float:left"></canvas>

我如何将图像添加到画布？

1 个答案: