Question

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

＆＃13;

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

＆＃13;

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

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

1 个答案: