时间戳

首页 > 解决方案 > 在网页上将地图显示为一系列图像

javascript - 在网页上将地图显示为一系列图像

问题描述

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

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

标签： javascripthtmlimage

解决方案

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

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

getContextcanvas是在元素上找到的函数，但您试图在 div 上调用它。

推荐阅读