HTML5 画布 - 图像无法正确绘制答案

【问题标题】：HTML5 canvas - Images won't draw properlyHTML5 画布 - 图像无法正确绘制
【发布时间】：2017-08-21 16:41:36
【问题描述】：

我必须使用 HTML 和 CSS 制作一个关于骑马的教程。虽然我只是一个初学者，但在我不得不画一些图像之前，一切都或多或少地顺利进行。
从代码中可以看出，Canvas_1 是最大的画布，在其边界内我有两个较小的画布，Canvas_2 和 myCanvas。我需要图像 preponsko.png 出现在 myCanvas 上，图像 dresurno.png 出现在 Canvas_2 上。图像已缩放以适合画布。
当我运行完整的代码时，只有图像 dresurno.png 的第二个函数正在工作，我可以在画布边框内看到照片。第一张照片没有出现。
当我删除第二个函数时，绘制图像的第一个函数 preponsko.png 起作用并出现图像。这使我得出结论，代码的 script 部分中的某些内容是错误的，但我就是想不通。感谢所有帮助。

    <!DOCTYPE HTML>  

<HTML>

<!-- background for the whole page -->
<div id="bg">
  <img src="pozadine/pozadina_konji_slajdovi.png" alt="">
</div>

<HEAD>

<link rel="stylesheet" href="css/stil_slajdovi.css">
<link rel="stylesheet" href="css/stil.css">

<meta charset="UTF-8">

</HEAD>



<BODY>

<!-- Canvas_1 - biggest canvas, within its borders are two smaller canvases, Canvas_2 and myCanvas, are positioned -->
<canvas id="Canvas_1" width="1340" height="618" style="position:absolute; left:10px; top:8px; border:solid red;"></canvas>

<canvas id="myCanvas" width="212" height="170" style="position:absolute; left:260px; top:140px; border:3px solid red;"></canvas>
<img id="rsz" width="0" height="0" src="slike/preponsko.png" alt="">

<canvas id="Canvas_2" width="220" height="220" style="position:absolute; left:280px; top:380px; border:3px solid red;"></canvas>
<img id="res_2" width="0" height="0" src="slike/dresurno.png" alt="">

 

<a id="button_nazad" href="d_saddle_information.html" class="action-button shadow animate blue" style="position:absolute; left:171px; top:589px;">Back</a>
<a id="button_naprijed" href="f_saddle_endurance_western.html" class="action-button shadow animate yellow" style="position:absolute; left:1058px; top:589px;">Forward</a>
  

 
 
 
<SCRIPT>
  
 <!-- first function that should draw the "slike/preponsko.png" image  -->
window.onload = function() { 
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext("2d");
var img = document.getElementById("rsz");
     
context.drawImage(img, 0,0);
      
}

<!-- second function that should draw the "slike/dresurno.png" image -->
window.onload = function() {
var canvas = document.getElementById("Canvas_2");
var context = canvas.getContext("2d");
var img = document.getElementById("res_2");
     
context.drawImage(img, 0,0);
      
}


</SCRIPT>

</BODY>

【问题讨论】：

我猜这是你的作业？检查您的开发控制台。
不，不是作业。不幸的是，作为一个完整的初学者，我不知道你刚才说了什么。
好吧，很抱歉那条评论 :) see this answer 为您的开发控制台提供帮助

标签： html canvas html5-canvas

【解决方案1】：

问题很容易解决。

您已经用第二个函数覆盖了window.onload 函数。

你有

window.onload = function(){ ...

然后在下面使用第二个函数设置相同的属性

window.onload = function(){ // second function

window.onload 只能保存一个引用，这将是第二个函数。

你可以通过定义一个函数来解决它，

window.onload = function() {
    var canvas = document.getElementById("myCanvas");  
    var context = canvas.getContext("2d");
    var img1 = document.getElementById("rsz");         
    context.drawImage(img1, 0,0);

    canvas = document.getElementById("Canvas_2");
    context = canvas.getContext("2d");
    var img2 = document.getElementById("res_2");         
    context.drawImage(img2, 0,0);

}

或者更好的是创建两个渲染函数并从一个 onload 事件中调用它们

// waits for page to load
window.onload = function() {
    renderImage("Canvas_1", "rsz");  // draw first image
    renderImage("Canvas_2", "res_2"); // draw second image
}

// gets a canvas with id = canvasId and draws the image with id = imageId
function renderImage(canvasId, imageId){
    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext("2d");
    const img = document.getElementById(imageId);         
    ctx.drawimage(img,0,0);
}

【讨论】：