[英]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.