Javascript HTML5使用for循环在画布上绘制图片？
所以，我想用HTML5创建一个minecraft网站主题。我对HTML5/Javascript有点不太了解（有一段时间没用了），我需要一些帮助。我正试图计算一个16x16px的瓷砖，可以适合在屏幕上的数量。然后，随机为屏幕背景“生成一张地图”。然后，我对生成贴图的循环使用相同的2，以用瓷砖填充屏幕（生成过程中分配的图片路径）。问题是，画布是完全白色的。有谁能找出问题，如果可能的话给我一些建议吗？提前谢谢！以下是我的HTML5代码：Javascript HTML5使用for循环在画布上绘制图片？,javascript,image,html,canvas,draw,Javascript,Image,Html,Canvas,Draw,所以，我想用HTML5创建一个minecraft网站主题。我对HTML5/Javascript有点不太了解（有一段时间没用了），我需要一些帮助。我正试图计算一个16x16px的瓷砖，可以适合在屏幕上的数量。然后，随机为屏幕背景“生成一张地图”。然后，我对生成贴图的循环使用相同的2，以用瓷砖填充屏幕（生成过程中分配的图片路径）。问题是，画布是完全白色的。有谁能找出问题，如果可能的话给我一些建议吗？提前谢谢！以下是我的HTML5代码： <!DOCTYPE html> <html&g
<!DOCTYPE html>
<html>
<head>
<title>Minecraft Background Check</title>
</head>
<body>
<canvas id="bg" style="position:fixed; top:0; left:0; border:1px solid #c3c3c3; width: 100%; height: 100%;"></canvas>
<script type="text/javascript">
"use strict";
var c = document.getElementById("bg");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var width = Math.ceil(window.innerWidth / 16);
var height = Math.ceil(window.innerHeight / 16);
for (var x=0;x<width;x++)
{
for(var y=0;y<height;y++)
{
var rand = Math.floor(Math.random()*11);
var texLoc = getImageNameFromRand(rand,y,height);
var img=new Image();
img.onload = function(){
return function() {
ctx.drawImage(img,x*16,y*16);
};
};
img.src=texLoc;
}
}
function getImageNameFromRand(rand,yVal,maxY)
{
var dirt = 'dirt.png';
var stone = 'stone.png';
var cobble = 'cobble.png';
var mosscobble = 'mosscobble.png';
var bedrock = 'bedrock.png';
if(yVal===0)
{
return dirt;
} else if(yVal<3)
{
if(rand < 7) {
return dirt; }
else {
return stone; }
} else if(yVal<5)
{
if(rand < 4) {
return dirt; }
else {
return stone; }
} else if(yVal<maxY-2)
{
if(rand === 0) {
return dirt; }
else if(rand < 4) {
return cobble; }
else if(rand < 5) {
return mosscobble; }
else {
return stone; }
} else if(yVal<maxY-1)
{
if(rand < 4) {
return bedrock; }
else {
return stone; }
} else if(yVal<maxY)
{
if(rand < 7) {
return bedrock; }
else {
return stone; }
} else {
return bedrock; }
return bedrock;
}
</script>
</body>
</html>
地雷艇背景检查
“严格使用”；
var c=document.getElementById（“bg”）；
var ctx=c.getContext（“2d”）；
ctx.canvas.width=window.innerWidth；
ctx.canvas.height=window.innerHeight；
var-width=Math.ceil（window.innerWidth/16）；
var height=Math.ceil（window.innerHeight/16）；
对于（var x=0；x当您执行以下操作时：
img.onload = function(){
return function() {
ctx.drawImage(img,x*16,y*16);
};
};
您正试图在img
上创建一个闭包，以便在onload
处理程序中，它将引用您在循环迭代中创建的映像
但是您并没有完全做到这一点，相反，onload
处理程序只是定义一个匿名函数，然后什么也不做
img.onload = function(img){
return function() {
ctx.drawImage(img,x*16,y*16);
};
}(img);
如果您更改它，以便立即调用匿名函数并传入img
，那么您将关闭img
（从for
循环上下文中），它将执行您想要的操作
如果不立即调用外部匿名函数，则它将成为图像的onload处理程序。并且不会发生任何事情。导致画布空白。问题在于，在for循环中，您在彼此的上方反复绘制图像。如果您在第一次循环之后完全脱离forloopst运行（x=0，y=0），您将在位置0,0处看到随机图像的一个平铺。当它穿过整个双for循环时，您的最后一个图像将绘制在画布的下角，这将创建您看到的“空白白色画布”。您需要让它绘制一个随机平铺的“预填充”画布。这也意味着您的for循环需要插入因为背景只绘制一次，而不是数百次/数千次，所以没有使用onload（）函数
寻找html5画布图案/瓷砖，然后从那里开始工作
此外，您的onload函数不需要内部函数，您可以将其设置为如下所示：
img.onload = function(){
// - nested for loops
// -> generate a tile pattern to fit the entire canvas
// - ctx.drawImage()
};
祝你好运！这里有很多要解释的内容。我测试了下面的代码并使其正常工作，但我只是反复使用了一个图像。希望在与代码合并时可以正常工作。将下面的代码放在for循环的位置（即变量高度之后和函数getImageNameFromRand之前）
首先，您的代码定义全局命名空间中的所有变量，因此每次通过原始循环替换img变量，以及它的src和onload函数等。此外，增加for循环的x和y通过onload函数中的闭包被引用，但因为它们仅在out过程中增加侧循环（不在onload函数中）它们都在onload调用期间设置为其结束值（原始循环运行时的结束值）
此外，请尝试将所有脚本放入一个匿名函数中，如（function（）{your CODE HERE}（））（）。这样，您就不会使用本地变量添加到全局名称空间中，并且由于闭包，onload将具有所需的功能。我测试了将所有内容放入匿名函数中，它对我有效
希望，我复制和粘贴这一切都正确。请评论，如果它是关闭的。祝你好运
//Copy this code in place of your original "for" loop:
var imgs = [];
var imgIndex = 0;
for (var x = 0; x < width; x++){
for(var y = 0; y < height; y++){
var rand = Math.floor(Math.random() * 11);
var texLoc = getImageNameFromRand(rand, y, height);
imgs[imgIndex] = new Image();
imgs[imgIndex].onload = (function () {
var thisX = x * 16;
var thisY = y * 16;
return function () {
ctx.drawImage(this, thisX, thisY);
};
}());
imgs[imgIndex].src = texLoc;
imgIndex += 1;
}
}
//复制此代码以代替原始的“for”循环：
var-imgs=[]；
var-imgIndex=0；
对于（变量x=0；x
谢谢，但我仍然得到一块空白画布。还有什么问题吗？再次感谢。你检查过画布以确保它占用了你期望的空间吗？例如，我会舍弃宽度：100%
和高度：100%
，而是使用右：0；下：0
来拉伸整个window（这应该适用于位置：fixed
）。否则，为了达到100%的宽度和高度，你还需要做大量其他工作。