簡體   English   中英

在JavaScript中加載要在畫布上繪制的圖像

[英]Loading images for drawing on canvas in javascript

我一直在嘗試教我11歲的兒子用JavaScript進行編程,但是我自己是一名Java程序員,因此我不太確定如何完成以下工作。 所編寫的代碼在drawRocket方法中顯示了一個簡單的塊,但是我兒子希望它顯示火箭的圖像。 但是,如果我在drawImage方法中添加注釋並在drawRect方法中添加注釋,則它不會顯示火箭圖像。

通過閱讀有關stackoverflow上該主題的各個線程,我了解到問題在於javascript無法同步加載圖像,因此我需要在火箭圖像對象上使用onload偵聽器編寫代碼。 但是,我嘗試用此代碼替換main()調用(並從main方法中刪除兩行):

var rocket = new Image();
rocket.onload = main(rocket);
rocket.src = "rocket.jpg";

而且仍然沒有用。 我嘗試了其他各種方法,但似乎無濟於事。 rocket.jpg圖片很好。

毫無疑問,答案很簡單,但是2小時后我仍然在掙扎。 有什么幫助嗎?

謝謝!

C。

PS煤動力火箭是下一件大事;)

<head>
<script>

function drawSky(ctx) {
   ctx.fillStyle = "rgb(0,0,50)";
   ctx.fillRect(0, 0, 300, 300);
}

function drawGround(ctx) {
   ctx.fillStyle = "rgb(150,150,127)";
   ctx.fillRect(0, 295, 300, 5);
}

function drawRocket(ctx, rocket, height) {
   var drawHeight = 250 - height*2;
   if (drawHeight > 245)
      drawHeight = 245;

//   ctx.drawImage(rocket, 140, drawHeight, 20, 50);

   ctx.fillStyle = "rgb(255,0,0)";
   ctx.fillRect(140, drawHeight, 20, 50);
}

function drawExplosion(ctx, size) {
   ctx.fillStyle = "rgb(255,102,0)";
   ctx.beginPath();
   ctx.arc(150, 295, size, 180*Math.PI/180, 360*Math.PI/180);
   ctx.fill();
}

function drawCoalBar(ctx, coal) {

   ctx.fillStyle = "rgb(255,255,255)";
   ctx.fillText("COAL", 10, 25);   


   if (coal <= 15)
      ctx.fillStyle = "rgb(255,0,0)";  
   else if (coal <= 30)
      ctx.fillStyle = "rgb(255,125,0)";
   else
      ctx.fillStyle = "rgb(255,225,0)";


   ctx.fillRect(45, 15, coal*4, 10);   
   ctx.strokeStyle = "rgb(255,255,255)";
   ctx.strokeRect(45, 15, 60*4, 10);   

}

function main() {

var canvas = document.getElementById('gameview');
var ctx = canvas.getContext('2d');

var rocket = new Image();
rocket.src = "rocket.jpg";

drawSky(ctx);
drawGround(ctx);

var name = prompt("What is your name?");
document.write("<p>Good luck Captain " + name + "!</p>");

var height = 100;
var speed = 0;
var coal = 60;
var burn = 0;
var gravity = 5;
var maxSpeedForSafeLanding = 8;

document.write("<p>");
document.write("The maximum speed for a safe landing is " + maxSpeedForSafeLanding + "m/s.");
document.write("<p>");

while (height > 0)
{
   document.write("Burn: " + burn + "kg");
   document.write(" - Height: " + height + "m");
   document.write(" - Speed: " + speed + "m/s");
   document.write(" - Coal: " + coal + "kg");
   document.write("<br />"); 

   drawSky(ctx);
   drawGround(ctx);
   drawRocket(ctx, rocket, height);
   drawCoalBar(ctx, coal);   


   // Ask for ammount of coal to burn
   var burn = prompt("How much coal do you want to burn?");
   burn = Number(burn);

   if (burn > coal)
     burn = coal;

   if (-burn > coal)
     burn = -coal;


   if (burn >= 0)
     coal = coal - burn;
   else
     coal = coal + burn;

   speed = speed + gravity - burn;

   height = height - speed; 
}

document.write("</p>");

drawSky(ctx);
drawGround(ctx);


if (speed <= maxSpeedForSafeLanding) {
   drawRocket(ctx, 0);

   document.write("<p>Congratulations Captain " + name + ".  You landed safely with a speed of " + speed + "m/s and you still have " + coal + "kg of coal left.</p>");
} else {
   drawExplosion(ctx, 25+coal*2+speed*2);

   document.write("<p>Rest In Peace Captain " + name + ".  You crashed with a speed of " + speed + "m/s and you still had " + coal + "kg of coal left.You will be burried on the planet you crashed on.</p>");
}

drawCoalBar(ctx, coal);
}
</script>
</head>

<body>

<h1>Rocket Lander Game</h1>

<canvas id="gameview" width="300" height="300"></canvas>

<script>
main();
</script>

</body>

嘗試這個:

var rocket = new Image();
rocket.onload = function(){ main(rocket) };
rocket.src = "rocket.jpg";

發生的情況是您正在調用函數main() main結果改為提供給onload

您可以這樣簡單地編寫它,以提供對main引用

rocket.onload = main;  //main will be invoked when image is loaded

要么

rocket.onload = function(e) { main() };

在后者中,我們提供了一個匿名函數作為參數,當它被調用時, main()在其內部被調用。 如果要在調用main()之前對圖像進行其他操作,這很有用。

因為在這種情況下, rocket是全球可用的,所以不需要將它作為main參數,但是如果您需要使用其他圖像調用main ,那么這當然是一個很好的方法。 但是您可以在main中添加一個參數變量:

function main(image) {

    /// ctx.drawImage(image, 0, 0); etc..
}

還考慮為圖像實現onerror回調處理程序,以防在圖像加載期間出現問題。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM