Question

我正在尝试学习使用HTML5 Canvas进行项目，并且刚开始使用在线教程（实际上是一个精美的编写，这里是链接：http://diveintohtml5.info/canvas.html）。但是，一旦我开始复制它，它就无法正常工作。我的浏览器是Chrome的最新版本，JavaScript已经开启等等。我在Visual Studio中工作，但这也无法在JSFiddle和我的简单文本编辑器上工作。

以下是HTML文件正文中的内容：

<canvas id="c" height="500" width="375"></canvas>


<script src="CanvasTest.js"></script>

这是JavaScript：

document.addEventListener('DOMContentLoaded', domloaded, false);
function domloaded() {
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    context.beginPath();

    // Draw vertical lines
    for (var x = .5; x < 500; x += 10) {
        context.moveTo(x, 0);
        context.lineTo(x, 375);
    }

    // Draw horizontal lines
    for (let y = .5; y < 375; y += 10) {
        context.moveTo(0, y);
        context.lineTo(500, y);
    }

    context.strokeStyle = "#00000";
    context.stroke();
}

Answer 1

您正在使用ES6功能let，将其更改为var。

以下是JS Bin的示例。

Answer 2

您将let代替var放入loop。

非常基本的HTML5 Canvas代码无法运行。这是我还是我的浏览器？

2 个答案: