Я не могу нарисовать прямоугольники на холсте внутри цикла for в JavaScript. Иногда они видны на долю секунды, но они исчезают мгновенно. Нет ошибок в консоли разработчика - протестировано на 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>