[英]Javascript failing to load images
目前,我已经熟悉HTML 5和Javascript,并且正在尝试使用Javascript将图像加载并绘制到HTML 5画布上。 这是HTML代码:
<html>
<head>
<title>Adam Leung</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>pegGame</h1>
<canvas id="mainCanvas" onload="" onclick="test()" width="800" height="480"></canvas>
<a><br>by: Adam Leung</a>
</body>
</html>
这是JavaScript代码:
function test(){
var mainCanvas = document.getElementById("mainCanvas");
var logoImage = new Image();
logoImage.src = "img/gameLogo.png";
alert(logoImage.width);
mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
}
这是文件结构:
/Site Root
-/css
-style.css
-/img
-gameLogo.png
-/js
-main.js
-index.html
gameLogo.png只是300px x 300px的图像。 我相信,当我加载index.html并在画布内单击时,它将在弹出窗口中打印“ 300”,并将gameLogo.png绘制到画布上。 当我单击画布时,弹出窗口显示“ 0”并且没有图像绘制,这是怎么回事? (编辑:我正在测试最新版本的Chrome)
非常感谢。
在图像上添加一个onload处理程序,您应该会很好:
function test(){
var mainCanvas = document.getElementById("mainCanvas");
var logoImage = new Image();
logoImage.onload = loadingDone; // here before setting src
logoImage.src = "img/gameLogo.png";
function loadingDone() { // gets called when done
alert(logoImage.width);
mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
}
}
图像加载是异步的,因此您需要使用回调。 否则,代码将继续并尝试在完成加载之前绘制图像(结果将显示为空白图像)。
还可以使用错误回调( onerror
)。
drawImage()
方法需要一个图像对象。 创建一个图像并等待其加载,然后再调用drawImage()
。 使用onload
方法。
就像是,
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 50);
};
imageObj.src = '../img/gameLogo.png';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.