Question

我正在尝试构建一个网页，该网页将允许用户从存储在数组中（直接或通过引用）到块的图像显示地牢地图。可以说我没有很多运气，我一直在研究直到脸色发青。有人可以让我知道我在做什么错...

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dungeons and Dragons 3.5 Map Generator</title>
    <script src="GenerateMaps.js"></script>

    <link rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body onload="runExperiments();">
    <div id="row">
        <div class="page_items" id="map">
            <script>
                window.onload=function() {
                    let c = document.getElementById("map");
                    let ctx = c.getContext("2d");
                    let x;
                    let y;
                    c.width = (window.innerWidth / 2)-(window.innerWidth % 30);
                    c.height = (window.innerHeight)-(window.innerHeight % 30);
                    ctx.width = c.width - 30;
                    ctx.height = c.width - 30;
                    let elem = document.createElement("image");
                    elem.setAttribute("src", "floor.png");
                    elem.setAttribute("height", "30");
                    elem.setAttribute("width", "30");
                    elem.setAttribute("src", "floor.png");
                    for (x = 30; x < ctx.height; x += 30) {
                        for (y = 30; y < ctx.width; y += 30) {
                            c.appendChild(elem);
                        }
                    }
                }
            </script>
        </div>
    </div>
</body>

Answer 1

您可能还有其他问题，但是如果您在浏览器中查看开发人员工具的控制台，则会突出显示当前问题。

未捕获的TypeError：c.getContext不是一个函数在window.onload

getContext是canvas elements上的一个函数，但是您试图在div上调用它。

以一系列图像的形式在网页上显示地图

1 个答案: