Javascript CANVAS поразителен: он позволяет нам рисовать что-то вроде линий, полигонов на экране браузера.Как работает Javascript CANVAS?
Интересно, как работает Javascript CANVAS. Например, чтобы нарисовать линию, использует ли она несколько выровненных по краям изображений для имитации линии или какого-либо другого подхода?
Заранее спасибо.
Несомненно, что это связано с реализацией механизма JavaScript JavaScript?
Любое разумное средство реализации просто использует растровое изображение (хранимое внутри браузера) и рисует его с использованием собственных команд рисования ОС.
Почему это имеет значение? Это совсем не связано с HTML + CSS, если это то, что вам интересно.
Более подробно, ради подробно в:
Когда в браузере HTML-парсер видит брезентовый элемент (из заданной шириной & высоты) необходимо выделить экранное растровое изображение, чтобы покрыть эту область. Он либо делает это вручную (т. Е. Malloc()), либо вызывает в некоторый собственный API-интерфейс API для создания поверхности для рисования. Собственный API OS может представлять собой Windows, Gtk, Kde, Qt или любую другую библиотеку чертежей, которую выбрал разработчик браузера. Кроме того, он сильно зависит от операционной системы. Internet Explorer, вероятно, звонит в некоторую родную библиотеку Windows (т. Е. DirectX или WinFooBarMethod()).
После того, как поверхность чертежа создана, она становится доступной для внутренних интерпретаторов интерпретатора JavaScript, вероятно, посредством указателя или дескриптора построенной поверхности чертежа. Затем, когда интерпретатор JS видит вызов одного из методов холста, он превращает это в вызов соответствующей рабочей команды ОС.
Таким образом, используя 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-совместимые веб-браузеры с поддержкой холста.
На второй взгляд, кажется, невозможно, чтобы javascript вызывал собственные методы рисования браузера. – 2009-04-18 04:42:09
JavaScript не может вызывать команды рисования ОС. * Браузер * интерпретирует JavaScript/CSS/HTML и * он * вызывает собственные команды рисования операционной системы для рисования необходимого. –
Это имеет смысл. Но какой метод на самом деле называется, когда я вызываю Canvas drawline()? Другими словами, как один черный пиксель фактически отображается в браузере по вызову Javascript? – 2009-04-18 12:24:32
Если вас интересует, как работает чертеж линии, ознакомьтесь с Bresenham's Line Drawing Algorithm.
Спасибо, но мне все равно, что алгоритм рисует линию или что-то в этом роде. Просто интересно, как один пиксель фактически отображается в браузере. – 2009-04-18 04:16:33
@ sc85: браузер выполняет работу. Он имеет контекст растрового изображения. Он может либо нарисовать линию, либо вызвать вызов OS для рисования линии. Это не имеет значения. Рисование сглаженной линии тривиально. – Nosredna
Вы думаете, слишком много, это просто:
Холст, как изображение, которое может быть обращено к браузеру.
Думаю, вы думаете о SVG. – tj111
Я думаю, что gs имеет правильную идею. Если мы можем убедиться, что мы понимаем, что «образ» в этом случае не является элементом img, а скорее (pardon the recursive definition) пустым «холстом», который можно вручную нарисовать из набора методов JavaScript. – jeremyosborne
Я считаю, что осуществление важно. Почему это имеет значение? Посмотрите на вспышку. Когда вы используете API-интерфейс рисования для создания сложных художественных работ фрактала, он на самом деле создает векторные иллюстрации и делает каждую линию и нарисовывает дочерний элемент объекта, нарисованного на нем, таким образом, он делает рендеринг векторной работы в каждом кадре. CRASH! или chug ... chug ........ chug .............. Итак, для сложных фракталов или искусства, которые записывают уравнения, я должен использовать растровый или рендер-движок CACKS. Это имеет значение, так как теперь я пытаюсь перенести некоторые из своих флеш-мультимедиа на Javascript и сталкиваться с различиями между браузерами.
Если вы знаете C++, вы можете перейти к источнику.
Например, в Firefox объект «графический контекст» реализуется классом nsCanvasRenderingContext2D. Но этот класс фактически не модифицирует пиксели напрямую. Вместо этого он запрашивает отдельный объект, называемый Thebes, для этого. Фибоны в свою очередь делегируют эту работу графической библиотеке под названием Cairo, которая обычно запрашивает библиотеку, предоставленную вашей операционной системой, для выполнения фактической работы с пикселями. Я думаю, это повсюду похожая история.
В самом низу холст имеет двумерный массив пикселей. Каждый пиксель представляет собой 32-разрядное целое число. Пиксель устанавливается путем присвоения значения элементу массива. Где-то есть немного кода, который определяет, какие пиксели рисовать, и присваивает соответствующие значения соответствующим элементам массива.
Теоретически пиксели могут быть нарисованы вашей видеокартой, но я слышал, что на видеокарты, как правило, нельзя доверять 2D-графике, потому что аппаратное обеспечение агрессивно настроено для 3D-игр и отдает слишком большую точность для скорости.
Это один из способов, что EG IE, поскольку он использует DirectX для рисования того, что он получает из CSS/HTML (контролируется), в любом случае тег Canvas может просто быть смещением вычисления draw, а затем вызовы java-скрипта просто говорят браузеры DirectX визуализируют то, что должно быть нарисовано с помощью холста смещения, я уверен, что это должно быть одинаковым для большинства браузеров, поскольку они должны использовать собственный рендеринг для отображения чего-либо и выше, просто доказывает, почему холст Firefox настолько медленный по сравнению с другими, но то Firefox может добавить DLL в середине рендеринга OpenGL, чтобы поддерживать его работу без каких-либо карт OpenGL –
Вы можете прочитать исходный код WebKit: http://webkit.org/building/checkout.html – gahooa
Вы сотрудник Microsoft? лол. –