Главная/ Полные справочники по веб-разработке: HTML, CSS и JavaScript/ Справочник по Canvas API: 2D-графика и интерактивный рендеринг на JavaScript

Справочник по Canvas API: 2D-графика и интерактивный рендеринг на JavaScript

Справочник Canvas API предоставляет детальную документацию по нативным возможностям рисования 2D-графики в браузере через JavaScript, без зависимости от сторонних библиотек. Раздел включает описания всех методов контекста CanvasRenderingContext2D: от базовой отрисовки фигур и путей до работы с изображениями, градиентами, паттернами и пиксельными данными (ImageData). Каждый метод сопровождается рабочими примерами, пояснениями по параметрам и рекомендациями по кроссбраузерной совместимости, что позволяет быстро внедрять графику в проекты любого масштаба.

Методы отрисовки, работа с изображениями и оптимизация производительности

Особое внимание уделено оптимизации производительности рендеринга: использованию requestAnimationFrame, пакетной отрисовке, управлению состоянием контекста и техникам снижения нагрузки на GPU. Мы также разбираем обработку событий мыши и клавиатуры внутри canvas, экспорт графики в различные форматы и интеграцию с WebGL для гибридных решений. Справочник ориентирован на практическое применение: создание игр, визуализацию данных, редакторы изображений и динамические фоновые эффекты с сохранением высокой скорости загрузки и соответствия современным веб-стандартам.

  • Метод fillRect добавлено 12.10.2011

    HTML5 canvas 2D API. Метод fillRect: описание пример.

  • shadowBlur добавлено 14.10.2011

    HTML5 canvas 2D API. Свойство shadowBlur: описание пример.

  • shadowColor добавлено 14.10.2011

    HTML5 canvas 2D API. Свойство shadowColor: описание пример.

  • shadowOffsetX добавлено 14.10.2011

    HTML5 canvas 2D API. Свойство shadowOffsetX: описание пример.

  • shadowOffsetY добавлено 14.10.2011

    HTML5 canvas 2D API. Свойство shadowOffsetY: описание пример.

  • Метод addColorStop добавлено 14.10.2011

    HTML5 canvas 2D API. Метод addColorStop: описание пример.

  • Метод arc добавлено 12.10.2011

    HTML5 canvas 2D API. Метод arc: описание пример.

  • Метод beginPath добавлено 12.10.2011

    HTML5 canvas 2D API. Метод beginPath: описание пример.

  • Метод bezierCurveTo добавлено 12.10.2011

    HTML5 canvas 2D API. Метод bezierCurveTo: описание пример.

  • Метод clearRect добавлено 12.10.2011

    HTML5 canvas 2D API. Метод clearRect: описание пример.

  • Метод clip добавлено 17.10.2011

    HTML5 canvas 2D API. Метод clip: описание пример.

  • Метод closePath добавлено 12.10.2011

    HTML5 canvas 2D API. Метод closePath: описание пример.

  • Метод createImageData добавлено 18.10.2011

    HTML5 canvas 2D API. Метод createImageData: описание пример.

  • Метод createLinearGradient добавлено 14.10.2011

    HTML5 canvas 2D API. Метод createLinearGradient: описание пример.

  • Метод createPattern добавлено 14.10.2011

    HTML5 canvas 2D API. Метод createPattern: описание пример.

  • Метод createRadialGradient добавлено 14.10.2011

    HTML5 canvas 2D API. Метод createRadialGradient: описание пример.

  • Метод drawImage добавлено 14.10.2011

    HTML5 canvas 2D API. Метод drawImage: описание пример.

  • Метод fill добавлено 12.10.2011

    HTML5 canvas 2D API. Метод fill: описание пример.

  • Метод fillStroke добавлено 12.10.2011

    HTML5 canvas 2D API. Метод fillStroke: описание пример.

  • Метод fillText добавлено 17.10.2011

    HTML5 canvas 2D API. Метод fillText: описание пример.

  • Метод getImageData добавлено 18.10.2011

    HTML5 canvas 2D API. Метод getImageData: описание пример.

  • Метод isPointInPath добавлено 18.10.2011

    HTML5 canvas 2D API. Метод isPointInPath: описание пример.

  • Метод lineTo добавлено 12.10.2011

    HTML5 canvas 2D API. Метод lineTo: описание пример.

  • Метод moveTo добавлено 12.10.2011

    HTML5 canvas 2D API. Метод moveTo: описание пример.

  • Метод putImageData добавлено 18.10.2011

    HTML5 canvas 2D API. Метод putImageData: описание пример.

  • Метод quadraticCurveTo добавлено 12.10.2011

    HTML5 canvas 2D API. Метод quadraticCurveTo: описание пример.

  • Метод restore добавлено 17.10.2011

    HTML5 canvas 2D API. Метод restore: описание пример.

  • Метод rotate добавлено 17.10.2011

    HTML5 canvas 2D API. Метод rotate: описание пример.

  • Метод save добавлено 17.10.2011

    HTML5 canvas 2D API. Метод save: описание пример.

  • Метод scale добавлено 17.10.2011

    HTML5 canvas 2D API. Метод scale: описание пример.

  • Метод setTransform добавлено 18.10.2011

    HTML5 canvas 2D API. Метод setTransform: описание пример.

  • Метод stroke добавлено 12.10.2011

    HTML5 canvas 2D API. Метод stroke: описание пример.

  • Метод strokeRect добавлено 18.10.2011

    HTML5 canvas 2D API. Метод strokeRect: описание пример.

  • Метод strokeText добавлено 17.10.2011

    HTML5 canvas 2D API. Метод strokeText: описание пример.

  • Метод toDataURL добавлено 19.10.2011

    HTML5 canvas 2D API. Метод toDataURL: описание пример.

  • Метод transform добавлено 17.10.2011

    HTML5 canvas 2D API. Метод transform: описание пример.

  • Метод translate добавлено 17.10.2011

    HTML5 canvas 2D API. Метод translate: описание пример.

  • Свойство fillStyle добавлено 12.10.2011

    HTML5 canvas 2D API. Свойство fillStyle: описание пример.

  • Свойство font добавлено 17.10.2011

    HTML5 canvas 2D API. Свойство font: описание пример.

  • Свойство globalAlpha добавлено 12.10.2011

    HTML5 canvas 2D API. Свойство globalAlpha: описание пример.

  • Свойство globalCompositeOperation добавлено 17.10.2011

    HTML5 canvas 2D API. Свойство globalCompositeOperation: описание пример.

  • Свойство lineCap добавлено 12.10.2011

    HTML5 canvas 2D API. Свойство lineCap: описание пример.

  • Свойство lineJoin добавлено 12.10.2011

    HTML5 canvas 2D API. Свойство lineJoin: описание пример.

  • Свойство lineWidth добавлено 12.10.2011

    HTML5 canvas 2D API. Свойство lineWidth: описание пример.

  • Свойство miterLimit добавлено 14.10.2011

    HTML5 canvas 2D API. Свойство miterLimit: описание пример.

  • Свойство strokeStyle добавлено 12.10.2011

    HTML5 canvas 2D API. Свойство strokeStyle: описание пример.

  • Свойство textAlign добавлено 17.10.2011

    HTML5 canvas 2D API. Свойство textAlign: описание пример.

  • Свойство textBaseline добавлено 17.10.2011

    HTML5 canvas 2D API. Свойство textBaseline: описание пример.