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畫布 - 圖片不能正確繪製

回答

相關問題