在 JavaScript 中使用 for 循环绘制 Canvas 的问题答案

【问题标题】：Problem with drawing Canvas using for loop in JavaScript在 JavaScript 中使用 for 循环绘制 Canvas 的问题
【发布时间】：2019-08-27 20:37:52
【问题描述】：

我无法在 JavaScript 的 for 循环内的画布中绘制矩形。有时它们会在几分之一秒内可见，但它们会立即消失。开发者控制台中没有错误 - 在 Firefox 和 Chrome 上测试，所以问题与浏览器无关。似乎只有我在课堂上遇到过这个问题，尽管代码完全相同（或根据我的需要稍作调整）。

代码在多个浏览器上进行了测试，问题本身似乎只出现在我的笔记本电脑/浏览器上 - 我的其他同事除了一些拼写错误等没有遇到过这个问题。

一般的想法是得到一个类似于这个的结果：

function Draw() {
    var l = liczba.value; // user-input based loop control
    var xpos = ypos = 300; // Left side rectangles starting drawing position
    var xneg = 600, yneg = 300; // Right side rectangles starting drawing position
    var canvas = document.getElementById('image');
    var context = canvas.getContext('2d');
    context.fillStyle = 'red';
    for(var i = 0; i < l; i++) {
        context.fillRect(xpos, ypos, 100, 100);
        context.strokeRect(xpos, ypos, 100, 100);
        console.log("Left Canvas Painted!"); // Debug

        context.fillRect(xneg, yneg, 100, 100);
        context.strokeRect(xneg, yneg, 100, 100);
        console.log("Right Canvas Painted!"); // Debug
        xpos += 50; xneg -= 50; ypos += 50; yneg += 50; // change next canvas' starting position by...
    }
}

<body>
        <form method="post" id="f" onsubmit="Draw();">
            <label>Podaj liczbę figur do narysowania: </label>
            <input type="text" name="liczba" id="liczba">
        <input type="submit" name="send" id="send" value="Zatwierdź">
    </form>
    <canvas id="image" width="1200" height="800">Canvasy nie działają</canvas>
</body>

【问题讨论】：

在 DOM 准备好后尝试绘制，google 一下。不理解您的 HTML cmets：
在这种情况下，评论并不重要。
为什么要在提交时绘制矩形？提交表单将导致它发布数据并重新加载。
@jcbdrn 这就是我所担心的。感谢您的提醒。
我已经发布了我认为是一个简单的解决方案

标签： javascript html dom canvas

【解决方案1】：

尝试将按钮从提交按钮更改为普通按钮，并在点击事件上调用 Draw()。

<input type="button" onclick="Draw()" name="send" id="send" value="Zatwierdź">

【讨论】：

【解决方案2】：

感谢@jcbbdrn，这个问题的答案非常简单——这是我的一个小疏忽。由于表单提交时页面重新加载，整个画布被冲下马桶。在实现一个常规按钮并为其分配一个onclick事件后，问题就解决了。

【讨论】：