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

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 的示例.