Javascript 如何将图像添加到画布？_Javascript_Html_Canvas

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

javascript html canvas

Javascript 如何将图像添加到画布？,javascript,html,canvas,Javascript,Html,Canvas,我一直在想如何在画布上添加图片，但我所做的一切都没有成功。有什么想法吗 HTML: 我不确定是否必须为“2d”元素创建变量。想法这是我的第一个问题，所以，如果我做错了，对不起。谢谢你的帮助您需要使用appendChild将图像附加到画布： var canvas=document.getElementById（'gl-canvas'）， context=canvas.getContext（'2d'）；使_基（）；函数make_base（） { var base_image=新图像（）；

我一直在想如何在画布上添加图片，但我所做的一切都没有成功。有什么想法吗

HTML:

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

这是我的第一个问题，所以，如果我做错了，对不起。谢谢你的帮助

您需要使用

appendChild

将图像附加到画布：

var canvas=document.getElementById（'gl-canvas'），
context=canvas.getContext（'2d'）；
使_基（）；
函数make_base（）
{
var base_image=新图像（）；
base_image.src=http://via.placeholder.com/350x150';
base_image.onload=函数（）{
drawImage（base_image，100100）；
canvas.appendChild（基本图像）；
}
}

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

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