<canvas> — элемент HTML, который можно отрисовать с помощью скриптов (обычно js).
<canvas> WebKit был впервые представлен Apple и использовался в Dashboard и Safari Mac OS X.
Сегодня все основные браузеры поддерживают его (IE9+, более ранние версии должны включать Explorer Canvas для поддержки)
1. Начните рисовать (контекст рендеринга)Элемент <canvas> создает холст фиксированного размера, на котором контекст рендеринга CanvasRenderContext2D может использоваться для рисования и обработки отображаемого содержимого.
Чтобы рисовать на холсте, вы должны сначала получить контекст рендеринга CanvasRenderContext2D2d. (Это относится к 2D, не говоря о webgl)
const Canvas = document.getElementById('mycanvas'); const ctx = Canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);Пример
2. Свойства CanvasRenderContext2D:Вы можете указать стиль рисунка, задав свойства контекста.
Все свойства следующие:
| свойство | Введение |
|---|---|
| холст | элемент холста |
| fillStyle | Текущий цвет, режим или градиент, используемый для заливки пути. |
| шрифт | Стиль шрифта |
| глобальнаяАльфа | Указывает непрозрачность содержимого, нарисованного на холсте. |
| globalCompositeOperation | Укажите, как цвет сочетается с цветами, уже имеющимися на холсте (композитинг). |
| линияКап | Указывает, как рисуются концы линии. |
| линияDashOffset | Установить смещение тире |
| линияПрисоединиться | Укажите, как соединяются две линии |
| ширина линии | Определяет толщину линии для операций кисти (рисования линий). |
| МитраЛимит | Если атрибут lineJoin имеет значение «под углом», этот атрибут определяет максимальное отношение длины диагонального соединения к ширине линии. |
| теньРазмытие | Уровень эффекта размытия |
| теньЦвет | цвет тени |
| теньOffsetX | Расстояние горизонтального смещения тени |
| теньOffsetY | Расстояние вертикального смещения тени |
| стиль штриха | Цвета, режимы и градиенты для контуров кисти (рисования). |
| textAlign | выравнивание текста |
| textBaseline | Вертикальное выравнивание текста |
Ширину и высоту Canvas необходимо указать с помощью значений атрибутов width и height.
Если не указано, размер холста по умолчанию — 300×150.
Ширина и высота, заданные стилем, представляют собой только размер отображения элемента холста, а не размер среды рисования.
холст {ширина: 1000 пикселей; высота: 600 пикселей; </canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = red;ctx.fillRect(10, 10, 100, 100); Пример ширины и высотыПочему стили имеют одинаковый размер, но отображаются совершенно по-разному?
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.