Как переопределить происхождение окна для createCanvas (window.innerWidth, window.innerHeight) в JavaScript (веб-браузер chrome)?

1

Я начинаю работу с javascript, используя библиотеку p5.js, и я заметил это: холст НЕ расположен в верхнем левом углу

Когда я создаю холст, он находится в начале координат в декартовой плоскости. Но происхождение не находится в верхнем левом углу окна. Фактически, начало координат (0, 0) находится в точке (8, 8), а верхний левый угол - (-8, -8). (Возможно) Вы можете увидеть это "смещение", выполняющее фрагмент.

Итак, как мне переместить начало (0, 0) в верхний левый угол? или Как переместить созданный холст в верхний левый угол?

(Это происходит в Chrome и в Edge, но отлично работает в Firefox. И я на Wwindows 10).

Это не помогло: https://github.com/processing/p5.js/wiki/Positioning-your-canvas

function setup() {
  var cnv = createCanvas(windowWidth, windowHeight);
  background(0);
}

function draw() {
  fill(0, 255, 0);
  rect(0, 0, 30, 30);
  console.log(mouseX, mouseY);
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
  <script src="test.js"></script>
  <title>index</title>
</head>

<body>

</body>

</html>
  • 0
    Можете ли вы проверить выполнение контрольного элемента на белой границе? Существует множество стилей, которые вы наследуете из таблицы стилей user-agent, которые могут просто накладывать отступы или что-то на ваше тело вокруг холста.
  • 0
    Я вижу эту проблему только с фрагментом Stack Overflow. Я не вижу этой проблемы в редакторе P5.js. Вы уверены, что это не система фрагментов SO, добавляющая некоторые стили?
Показать ещё 1 комментарий
Теги:
p5.js

1 ответ

0
Лучший ответ

В связи с этим. Чтобы переместить, вы можете попробовать стилизовать тело:

html, body
{
    margin: 0px; padding: 0px
}

или присвоение родительского элемента холсту и его стилизация.

Поделиться
  • 0
    Ну, это сработало. Тело имело запас в 8 пикселей. Спасибо :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню