HTML5画布 - 图片不能正确绘制

我不得不使用HTML和CSS制作骑马教程。尽管我只是一个初学者，但是在我不得不绘制一些图像之前，所有的事情都或多或少地顺利。
正如你可以从代码中看到，Canvas_1是最大的帆布和其边界内我有两个较小的画布，Canvas_2和myCanvas。我需要像preponsko.png出现在myCanvas和图像dresurno.png出现在Canvas_2。图像已被缩放以适应画布。
当我运行完整的代码时，只有第二个函数，图像dresurno.png，正在工作，我可以看到画布边框内的照片。第一张照片没有出现。
当我删除第二个功能时，第一个绘制图像的功能preponsko.png工程和图像出现。这导致我得出结论，在脚本部分代码是错误的，但我无法弄清楚。所有的帮助表示赞赏。HTML5画布 - 图片不能正确绘制

<!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>

来源

2017-08-21 zero_brains

我想这是你的家庭作业？检查你的开发控制台。 – lumio

不，不做作业。不幸的是，作为一个完整的初学者，我不知道你刚才说了些什么。 –

关于那个评论然后:)对不起，[请参阅此答案]（https://stackoverflow.com/a/66434/881032）寻求您的开发控制台帮助 – lumio

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

来源

2017-08-22 01:01:37 Blindman67

Blindman67，你是男人！解决方案有效，谢谢！ –

HTML5画布 - 图片不能正确绘制

回答

相关问题