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

Question

我正在尝试学习将 HTML5 Canvas 用于一个项目，并且刚刚开始使用在线教程（实际上是一个写得很漂亮的教程，这里是 link：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

您在 loop.

中输入 let 而不是 var

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

Very basic HTML5 Canvas code failing to run. Is this me or my browser?

html

javascript

canvas

html5-canvas

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

Very basic HTML5 Canvas code failing to run. Is this me or my browser?

html

javascript

canvas

html5-canvas

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