Почему код не рисует на холсте?
Код должен рисовать на холсте круг, но этого не происходит, холст только заливается черным.
function drawBox(position, width, height, angle) { console.log(position, width, height, angle, FRAME) let angleInRadians = (angle * Math.PI) / 180 FRAME.save() FRAME.strokeStyle = '#fff' FRAME.translate(position.x, position.y) FRAME.rotate(angleInRadians) FRAME.fillStyle = '#000' FRAME.fillRect(-width / 2, -height / 2, width, height) FRAME.restore() } |
function drawBox(position, width, height, angle) { console.log(position, width, height, angle, FRAME) let angleInRadians = (angle * Math.PI) / 180 FRAME.save() FRAME.strokeStyle = '#fff' FRAME.translate(position.x, position.y) FRAME.rotate(angleInRadians) FRAME.fillStyle = '#000' FRAME.fillRect(-width / 2, -height / 2, width, height) FRAME.restore() }
function setup() { body = new RigidBody() body.initBoxBody(100, 100, new Vector(100, 100), false, 1) ENTITIES.push({RigidBody: body}) } |
function setup() { body = new RigidBody() body.initBoxBody(100, 100, new Vector(100, 100), false, 1) ENTITIES.push({RigidBody: body}) }
function DrawingSystem() { for (let entity of ENTITIES) { if (!('RigidBody' in entity)) continue let body = entity.RigidBody // circle if (body.shapeType == 0) { drawCircle(body.position, body.radius) } // box if (body.shapeType == 1) { drawBox(body.position, body.width, body.height, body.rotation) } } } |
function DrawingSystem() { for (let entity of ENTITIES) { if (!('RigidBody' in entity)) continue let body = entity.RigidBody // circle if (body.shapeType == 0) { drawCircle(body.position, body.radius) } // box if (body.shapeType == 1) { drawBox(body.position, body.width, body.height, body.rotation) } } }
В консоль выводится вектор позиции, радиус и canvas, поэтому все аргументы и canvas заданы правильно. Размеры холста 1920*1080, их тоже выводил в консоль, все выводится правильно.
Дополнительно:
Что такое FRAME? Это результат getContext("2d")?
Контекст полотна уже лежит во FRAME, когда вызывается DrawingSystem?
вот что выводится в консоль во время работы drawCircle
Ответы:
function drawCircle(position, radius) { FRAME.save(); FRAME.fillStyle = '#fff'; // Установка цвета заливки круга FRAME.beginPath(); // Начало нового пути FRAME.arc(position.x, position.y, radius, 0, 2 * Math.PI); // Рисование окружности FRAME.fill(); // Заливка круга FRAME.restore(); // Восстановление предыдущего состояния контекста холста } |
function drawCircle(position, radius) { FRAME.save(); FRAME.fillStyle = '#fff'; // Установка цвета заливки круга FRAME.beginPath(); // Начало нового пути FRAME.arc(position.x, position.y, radius, 0, 2 * Math.PI); // Рисование окружности FRAME.fill(); // Заливка круга FRAME.restore(); // Восстановление предыдущего состояния контекста холста }
Должно работать
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разобраться, почему код не рисует на холсте, необходимо проверить несколько возможных причин:
1. Проверьте, правильно ли вы создали холст и добавили его на страницу. Убедитесь, что у вас есть элемент canvas в HTML и вы правильно получили его в JavaScript.
2. Убедитесь, что вы правильно настроили контекст рисования (2D или 3D) для вашего холста. Например, для 2D контекста используйте следующий код:
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');
3. Проверьте, что вы правильно используете методы рисования, такие как stroke(), fill(), beginPath() и другие. Убедитесь, что вы вызываете эти методы в правильном порядке.
4. Проверьте, не содержит ли ваш код ошибок, таких как опечатки или неправильное использование переменных. Убедитесь, что все переменные и функции определены до их использования.
5. Убедитесь, что ваш холст имеет правильные размеры и координаты для рисования объектов. Проверьте, что вы правильно устанавливаете ширину и высоту холста, а также координаты рисования объектов.
Если после проверки всех этих возможных причин ваш код все равно не рисует на холсте, попробуйте упростить его до минимального рабочего примера и постепенно добавляйте функционал, чтобы выяснить, в чем именно проблема. Также не забывайте использовать инструменты разработчика браузера, такие как консоль, чтобы отслеживать ошибки и выводить отладочную информацию.