所以,我想使用 HTML5 创建一个 minecraft 网站主题。我在 HTML5/Javascript 中有点不稳定(有一段时间没有使用它),我需要一些帮助。我正在尝试计算适合屏幕的 16x16 像素图块的数量。然后,随机“生成一张 map ”作为屏幕背景。然后,我使用相同的 2 for 循环来生成 map 以用图块填充屏幕(在生成过程中分配了图片路径)。问题是, Canvas 完全是白色的。任何人都可以找出问题,并在可能的情况下给我任何提示吗?提前致谢!这是我的 HTML5 代码:

<!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>

最佳答案

这里有很多事情要解释。我测试了下面的代码并让它工作,但我只是一遍又一遍地使用一张图片。希望这在与您的代码合并时会起作用。将代码放在下面,代替 for 循环(即,在 var height 之后和函数 getImageNameFromRand 之前)。

首先,您的代码定义了全局命名空间中的所有变量,因此每次通过原始循环都会替换 img 变量及其 src 和 onload 函数等。此外,增加 for 循环的 x 和 y 通过 onload 函数中的闭包被引用,但因为它们仅在外部循环期间(不在 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;
    }
}

关于javascript - HTML5 在 Canvas 上用 for 循环绘制图片?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9594420/

10-12 12:31
查看更多