Руководство по Canvas
— это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации. Изображения в правой части статьи являются примерами использования . Примеры их создания приводятся в этой статье.
В этом руководстве описываются основы использования элемента для рисования 2D-графики. Приведённые примеры дадут вам понимание того, что вы можете сделать с помощью , а использованные в статье фрагменты кода помогут в создании собственных проектов.
Впервые использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с . Тег часть спецификации WhatWG Web applications 1.0 также известной как HTML5.
Прежде чем начать
Работа с элементом довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height и width . Для рисования графики мы будем использовать javascript context object , который создаёт графику динамически.
В этом руководстве
- Базовое использование
- Рисование форм (en-US)
- Использование изображений (en-US)
- Применение стилей и цветов (en-US)
- Трансформации (en-US)
- Композирование и обрезка (en-US)
- Базовое анимирование (en-US)
- Оптимизация canvas (en-US)
Смотрите Также
- Canvas topic page
- Drawing Graphics with Canvas (en-US)
- Canvas examples
- HTML5 Tutorial
- Drawing Text Using a Canvas (en-US)
- Adding Text to Canvas
- Canvas Drawing and Animation Application
- Interactive canvas tutorial
- HTML5CanvasTutorials
- How to draw N grade Bézier curves with the Canvas API
- W3C Standard
Примечание для помощников
Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Что такое canvas html5
HTML Элемент может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока . Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.
Больше статей о canvas canvas topic page.
| Content categories (en-US) | Flow content (en-US) , phrasing content (en-US) , embedded content (en-US) , palpable content. |
|---|---|
| Permitted content | Transparent но без interactive content (en-US) descendants except(соглашаться?) для элементы, элементы, элементы как type атрибут is checkbox , radio , или button . |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parent elements | Any element that accepts phrasing_content (en-US) . |
| DOM interface | HTMLCanvasElement |
Атрибуты
Высота в координатном пространстве в CSS пикселях. По умолчанию 150.
Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.
Ширина в координатном пространстве в CSS пикселях. По умолчанию 300.
Описание
Обязательно тег
Определение размеров холста
Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах , и не используя CSS.
Примеры
canvas id="canvas" width="300" height="300"> Извините, ваш браузер нет поддерживает<canvas> элемент. canvas>
Если ваш холст не использует transparency, установите moz-opaque атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .
canvas id="mycanvas" moz-opaque>canvas>
Спецификации
| Specification |
|---|
| HTML Standard # the-canvas-element |
Совместимость браузеров
BCD tables only load in the browser
Смотрите также
- MDN canvas portal
- Canvas tutorial
- Canvas cheat sheet
- Canvas-related demos
- Canvas introduction by Apple
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Что такое canvas в HTML5?
HTML тег
Также для этого тега стоит использовать атрибут id , благодаря которому мы сможем найти тег в JavaScript и вставить туда программу. Требует закрывающий тег .
- width — здесь вы можете установить ширину области. Изначально она равна 150px .
- height — здесь вы можете установить высоту области. Изначально она равна 300px .
JavaScript код небольшой программы:
var canavas = document.getElementById("field"); var c = canavas.getContext("2d"); c.moveTo(0,0); c.lineTo(300,70); c.stroke(); // Создаем градиент var grd = c.createLinearGradient(0,0,200,0); grd.addColorStop(0,"green"); grd.addColorStop(1,"blue"); // Заполняем область градиентом c.fillStyle = grd; c.fillRect(10,100,280,40);HTML код простейшей формы:
Что такое canvas html5
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега можно создавать рисунки, анимацию, игры и др.
Синтаксис
height Задает высоту холста. По умолчанию 300 пикселов. width Задает ширину холста. По умолчанию 150 пикселов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE 8 IE 9 Cr Op Sa Fx
canvas Результат примера в браузере Opera показан на рис. 1.
Как изучить математику на высшем уровне