Как работает Javascript CANVAS?

Question

Javascript CANVAS удивителен: он позволяет нам рисовать что-то вроде линий, многоугольников на экране браузера.

Интересно, как работает Javascript CANVAS. Например, чтобы нарисовать линию, использует ли она выровненные серии крошечные изображения для имитации линии или какой-то другой подход?

Заранее спасибо.

Answer 1

Любой разумный разработчик просто использовал бы растровое изображение (хранящееся внутри в браузере) и рисовал его, используя собственные команды рисования ОС.

Почему это важно? Это совсем не связано с HTML + CSS, если это то, что вам интересно.

Более подробно, ради деталей:

Когда анализатор HTML браузера видит элемент canvas (заданной ширины и высоты), ему необходимо выделить экранное растровое изображение, чтобы покрыть эту область. Он либо делает это вручную (то есть malloc ()), либо вызывает некоторый собственный API рисования ОС, чтобы создать поверхность для рисования. Нативным API операционной системы может быть Windows, Gtk, Kde, Qt или любая другая библиотека чертежей, выбранная разработчиком браузера. Кроме того, это сильно зависит от операционной системы. Internet Explorer, вероятно, вызывает какую-то собственную библиотеку Windows (например, DirectX или WinFooBarMethod ()).

Как только поверхность рисования создана, она становится доступной внутренним внутренностям интерпретатора JavaScript, вероятно, через указатель или дескриптор созданной поверхности рисования. Затем, когда интерпретатор JS видит вызов одного из методов canvas, он превращает его в вызов соответствующей собственной команды ОС.

Итак, используя метафору стиля Windows 3.1:

"new canvas(width, height)" = "WinCreatePixmap(width, height)" 
"canvas.setPixel(x,y,color)" = "WinSetPixel(x,y,color)"

И используя вручную управляемое растровое изображение:

"new canvas(width, height)" = "malloc(width * height * sizeof(Pixel))"
"canvas.setPixel(x,y,color)" = "canvas[x][y] = color;" 

Опять же, для разработчика JavaScript не должно иметь значения, как эти методы реализованы. Единственные люди, которым нужно заботиться, это те, кто пишет HTML5-совместимые веб-браузеры с поддержкой canvas.

Answer 2

Если вы знаете C ++, вы можете перейти к источнику.

Например, в Firefox объект «графический контекст» реализуется классом nsCanvasRenderingContext2D. Но этот класс на самом деле не изменяет пиксели напрямую. Вместо этого он просит отдельный объект, называемый Фивами, сделать это. Thebes, в свою очередь, делегирует эту работу в графическую библиотеку Cairo , которая обычно запрашивает библиотеку, предоставленную вашей операционной системой, для фактической работы с пикселями. Я полагаю, что везде похожая история.

В самом низу холста находится двумерный массив пикселей. Каждый пиксель представляет собой 32-разрядное целое число. Пиксель устанавливается путем присвоения значения элементу массива. Где-то есть фрагмент кода, который определяет пиксели для рисования и присваивает соответствующие значения соответствующим элементам массива.

Теоретически, пиксели могут быть прорисованы вашей видеокартой, но я слышал, что графическим картам вообще нельзя доверять выполнение 2D-графики, потому что аппаратное обеспечение агрессивно настроено для 3D-игр и торгует слишком много точности для скорость.

Answer 3

Ты слишком много думаешь, все просто:

Холст - это изображение, которое можно нарисовать в браузере.

Answer 4

Конечно, это зависит от реализации движка JavaScript рассматриваемого браузера?

Answer 5

Я думаю, что реализация важна. Почему это имеет значение? Посмотри на вспышку. Когда вы используете API рисования для создания сложных фрактальных рисунков, он фактически создает векторные рисунки и делает каждую линию и кривую дочерним элементом объекта, на котором рисуется, таким образом он воспроизводит векторное изображение в каждом кадре. или чуг ... чуг ........ чуг .............. Так что для сложных фракталов или искусства, которое записывает уравнения, я должен использовать растровое изображение или CACKS движка рендеринга. Это имеет значение, так как сейчас я пытаюсь перенести некоторые из моих флэш-мультимедиа в Javascript и сталкиваюсь с различиями между браузерами.

Answer 6

Если вам интересно, как работает рисование линий, посмотрите Алгоритм рисования линий Брезенхэма .