我在网页中有 2 个函数(js
),用于将图像附加到 Canvas 元素:
function attachImage(tile, x, y)
{
base_image = new Image();
base_image.src = 'Images/tiles/'+(tile-1)+'.png';
base_image.onload = function(){
context.drawImage(base_image, 32*x,32*y);
}
}
我确实复制并粘贴了它,并将其复制到另一个 Canvas
function attachImage2(tile2, x2, y2)
{
base_image2 = new Image();
base_image2.src = 'Images/tiles/'+(tile2-1)+'.png';
base_image2.onLoad = function(){
context2.drawImage(base_image2, 32*x2,32*y2);
}
}
在 Firefox 上,如果我创建一个 onload
和另一个 onLoad
,那么它就可以正常工作。但无论我对 chrome 做什么,它都无法正确加载图像。
编辑:这是 Firefox 和 Chrome 之间的图像比较:
Chrome :/image/u12H6.jpg
最佳答案
您应该使用onload
(小写)。
一些一般性说明
- 当您需要局部变量时,请使用
var
。 - 您应该在实际设置
src
之前设置onload
,因为否则(对于缓存)会生成onload
图像可能不会被叫到。 - 由于您的方法执行相同的操作,因此您应该仅使用一个方法,并将上下文作为参数传递
所以
<script>
var canvas = document.getElementById('map');
context = canvas.getContext('2d');
var canvas2 = document.getElementById('map2');
context2 = canvas2.getContext('2d');
function attachImage(tile, x, y, canvasContext)
{
var base_image = new Image();
base_image.onload = function(){
canvasContext.drawImage(base_image, 32*x,32*y);
}
base_image.src = 'Images/tiles/'+(tile-1)+'.png';
}
</script>
并且您不应该为每个调用创建 script
标记
<?php
echo("<script>");
for($tr = 0; $tr < count($mapArray)-1; $tr++) {
for($tc = 0; $tc < count($mapArray[$tr])-1; $tc++) {
$tile = $mapArray[$tr][$tc];
echo "attachImage(" . $tile . "," . $tc . "," . $tr . ",context);";
}
}
for($tr = 0; $tr < count($mapArrayy)-1; $tr++) {
for($tc = 0; $tc < count($mapArrayy[$tr])-1; $tc++) {
if($mapArrayy[$tr][$tc]!=0){
echo "attachImage(" . $mapArrayy[$tr][$tc]. "," . $tc . "," . $tr . ",context2);";
}
}
}
echo("</script>");
?>
关于javascript - onload 与 onLoad(区分大小写),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13115377/