проблема рисования линий на холсте & # 8230;
-
22-07-2019 - |
Вопрос
У меня есть тег canvas, я использую его для рисования линий, холст - это квадрат. Я использую "пробел" записать пространство между двумя строками. и у меня есть canvasWidth и canvasHight, чтобы записать размер холста, на самом деле, это один и тот же numnber .... 320
var x=0;
for (var i = 0; i < 5; i++) {
x = parseInt(x + space);
myCanvas.fillStyle = "rgb(200,0,0)";
myCanvas.fillRect(x, 1, 1, canvasHeight);
myCanvas.fillStyle = "rgb(0,200,0)";
myCanvas.fillRect(1, x, canvasWidth, 1);
}
Я могу использовать нарисовать все красные линии на холсте, но только зеленые линии могут нарисовать две на холсте, другие просто не могут появиться, Я использовал try {} catch, и ошибка не исчезла.
Решение
Какой браузер вы используете?
Кажется, проблема не в коде, который вы показали, потому что он отлично работает для меня.
Вот мой пример HTML:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height="320" width="320" />
<script language="javascript">
var myCanvas = document.getElementById('myCanvas').getContext('2d');
var space = 10;
var x=0;
var canvasHeight = 320;
var canvasWidth = 320;
for (var i = 0; i < 5; i++) {
x = parseInt(x + space);
myCanvas.fillStyle = "rgb(200,0,0)";
myCanvas.fillRect(x, 1, 1, canvasHeight);
myCanvas.fillStyle = "rgb(0,200,0)";
myCanvas.fillRect(1, x, canvasWidth, 1);
}
</script>
</body>
</html>
Другие советы
Почему вы используете parseInt, ваша переменная пространства имеет тип строки? Если нет, попробуйте удалить parseInt.