HTML5 Canvas

Элемент <canvas> определяет контейнер для графики, такой как диаграммы и изображения. Для рисования графики необходимо использовать скрипты (обычно JavaScript).

Нарисуйте на canvas красный прямоугольник, прямоугольник с градиентом, цветной прямоугольник и немного цветного текста.

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Что такое canvas?

Элемент HTML5 <canvas> используется для рисования графики, которое выполняется с помощью скриптов (обычно JavaScript).

Элемент <canvas> — это всего лишь контейнер для графики, и для рисования графики необходимо использовать скрипты.

Вы можете использовать canvas для рисования путей, прямоугольников, кругов, символов и различными способами добавлять изображения.

Поддержка браузеров

Номер версии первого браузера, поддерживающего элемент <canvas>, представлен в таблице.

Элемент
<canvas> 4.0 9.0 2.0 3.1 9.0

Создание холста (Canvas)

На веб-странице холст — это прямоугольная область, определяемая элементом <canvas>.

Примечание:По умолчанию элемент <canvas> не имеет границы и содержимого.

Простой пример элемента <canvas>

Примечание:Элемент <canvas> обычно требует указания атрибута id (на который часто ссылаются в скрипте), а атрибуты width и height определяют размер холста.

Совет:На HTML-странице можно использовать несколько элементов <canvas>.

Используйте атрибут style, чтобы добавить границу:

Пример

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

Попробуйте »

Использование JavaScript для рисования изображений

Сам элемент <canvas> не обладает возможностями рисования. Вся работа по рисованию должна выполняться внутри JavaScript:

Пример

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);

Пример

Пояснение к примеру:

Сначала найдите элемент <canvas>:

var c=document.getElementById("myCanvas");

Затем создайте объект контекста:

var ctx=c.getContext("2d");

Объект getContext("2d") — это встроенный объект HTML5, имеющий множество методов для рисования путей, прямоугольников, окружностей, символов и добавления изображений.

Следующие две строки кода рисуют красный прямоугольник:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Свойство fillStyle может принимать CSS-цвета, градиенты или узоры. Значение fillStyle по умолчанию — #000000 (чёрный).

Метод fillRect(x,y,width,height) задаёт текущий способ заливки для текущего прямоугольника.

Координаты Canvas

Canvas — это двумерная сетка.

Координата левого верхнего угла Canvas — (0,0).

Метод fillRect с параметрами (0,0,150,75) означает: нарисовать прямоугольник 150x75 на Canvas, начиная с левого верхнего угла (0,0).

Пример с координатами:

Как показано на рисунке ниже, координаты X и Y Canvas используются для позиционирования рисунка на Canvas. Прямоугольная рамка, перетаскиваемая мышью, отображает координаты позиционирования.

Canvas — пути

X
Y

Canvas — пути

) Задаёт начальную координату линии

  • moveTo(x,y) Задаёт конечную координату линии
  • lineTo(x,yЧтобы рисовать линии, нужно использовать метод «чернил», такой как stroke().

Пример

Пример

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Попробуйте »

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

Чтобы нарисовать круг на canvas, мы будем использовать следующие методы:

На самом деле, при рисовании круга мы используем метод «чернил», такой как stroke() или fill().

arc(x,y,r,start,stop)

Пример

Пример

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Попробуйте »

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

Canvas - Текст

Canvas - Текст

font - Определить шрифт

  • ) - Рисует залитый текст на canvas
  • fillText(text,x,y) - Рисует контурный текст на canvas
  • strokeText(text,x,yИспользуйте fillText():

Пример

Пример

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Попробуйте »

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);

Используйте strokeText():

Пример

Пример

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Попробуйте »

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);

Canvas - Градиенты

Canvas - Градиенты

Существует два разных способа настроить градиент Canvas:

) - Создать линейный градиент

  • createLinearGradient(x,y,x1,y1) - Создать радиальный/круговой градиент
  • createRadialGradient(x,y,r,x1,y1,r1При использовании объекта градиента необходимо использовать два или более цвета остановок.

Метод addColorStop() задаёт цветовую остановку, а параметры описываются координатами, которые могут быть от 0 до 1.

Используйте градиент, установите значение fillStyle или strokeStyle равным градиенту, а затем рисуйте фигуры, такие как прямоугольники, тексты или линии.

Используйте createLinearGradient():

Пример

Пример

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Создайте градиент

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //Заполните градиент var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); //Попробуйте » ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

Используйте createRadialGradient():

Пример

Пример

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Создайте градиент

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //Заполните градиент var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); //Попробуйте » ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

Canvas - Изображения

Canvas - Изображения

Использование изображений:

  • drawImage(image,x,y)

Использование изображений:

The Scream

Справочное руководство по HTML Canvas

Ваш браузер не поддерживает элемент HTML5 <canvas>.

Попробуйте »

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);

Справочное руководство по HTML Canvas

Тег HTML <canvas>

Справочное руководство по HTML CanvasТег HTML <canvas>

Canvas в изображение

Тег Элемент HTML5 <canvas> использует JavaScript для рисования изображений на веб-странице.
<canvas> Для получения дополнительной информации см.:

Чтобы изучить HTML5 Canvas, достаточно этой статьи.Другие расширения

ИИ размышляет...