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

【问题标题】：How would i add an image to my canvas?如何将图像添加到我的画布？
【发布时间】：2018-05-16 05:31:03
【问题描述】：

我一直试图弄清楚如何将图片添加到我的画布，但我尝试的所有方法都没有奏效。有什么想法吗？

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”元素创建一个变量。想法？

附言。这是我的第一个问题，所以，如果我做错了什么，对不起。感谢您的帮助！

【问题讨论】：

标签： javascript html canvas

【解决方案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);
  }
}

&lt;canvas id="gl-canvas" width="800" height="600" style="float:left"&gt;&lt;/canvas&gt;

【讨论】：