为什么我的图像不能在 Canvas 中绘制？我的代码没有错误

Question

I got this sample of code which i was working on it, i got a trouble with because my image angular doesn't appear on the web browser, i can't understand what's my mistake, thanks in advance for your help.我得到了我正在处理的这个代码示例，我遇到了麻烦，因为我的图像角度没有出现在网络浏览器上，我不明白我的错误是什么，在此先感谢您的帮助。

<html>

<script>

var canvas,context;

function init(){


canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
monImg = new Image();
monImg.src="img/angular.png";
context.drawImage(monImg,300,300);


}


window.onload=init();


</script>

 <body>
  <canvas id="canvas" width="1920" height="1080"></canvas>
 </body>

Answer 1

See this question .看到这个问题。

You have to wait for the image to load before you do anything with it.在对图像执行任何操作之前，您必须等待图像加载。 The easiest way is:最简单的方法是：

monImg = new Image();
monImg.onLoad = function() {
    context.drawImage(monImg, 300, 300);
}
monImg.src = "img/angular.png";

Answer 2

You need to add a handler for the Image onload where you call drawImage() such as:您需要为调用 drawImage() 的 Image onload 添加处理程序，例如：

 <html>

 <body>
  <canvas id="canvas" width="1920" height="1080"></canvas>
 </body>

<script>

var canvas,context;

function init(){

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
monImg = new Image();
monImg.src="img/angular.png";
monImg.onload = function() {
    context.drawImage(monImg,300,300);
}

}


window.onload=init();


</script>

 </html>

为什么我的图像不能在 Canvas 中绘制？我的代码没有错误

问题描述

2 个解决方案

解决方案1
2 2019-01-09 13:52:39

解决方案2
1 已采纳 2019-01-09 13:58:52

为什么我的图像不能在 Canvas 中绘制？ 我的代码没有错误

问题描述

2 个解决方案

解决方案1 2 2019-01-09 13:52:39

解决方案2 1 已采纳 2019-01-09 13:58:52

为什么我的图像不能在 Canvas 中绘制？我的代码没有错误

解决方案1
2 2019-01-09 13:52:39

解决方案2
1 已采纳 2019-01-09 13:58:52