Обновлено: 07.06.2018 09:08

HTML5 canvas

Элемент HTML <canvas> используется для рисования графики на веб-странице.

Элемент HTML <canvas> - холст для рисования графики «на лету» с помощью сценариев (обычно JavaScript).

Элемент <canvas> - это только контейнер для графики. Для рисования внутри него нужно использовать скрипт. Текст внутри элемента canvas игнорируется, если браузер поддерживает элемент <canvas> HTML5. Если он не поддерживается, то текст будет отображаться браузером .

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

Для элемента <canvas> можно задать размеры, можно задать атрибут style. По-умолчанию его размеры: 300 на 150 пикселей (если они не заданы).

Создать canvas :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">Your browser does not support HTML5 </canvas>

При рисовании нужно иметь в виду, что размеры рисуемых элементов - не абсолютные. Они - логические, зависят от размера canvas.

Одна точка рисуемого элемента соответствует отдному пикселю в том случае, если canvas имеет размеры по-умолчанию (300 на 150 пикселей). Если, например, задать для него размеры 600 на 150, то все горизонтальные размеры рисуемого объекта бутут увеличены в 2 раза.

Например, при рисовании на наком холсте прямоугольника размером 100 на 100, его изображение будет иметь размер 200 на 100.

Рисование простых элементов

Холст изначально пуст. Чтобы отобразить что-то, скрипт (JavaScript) сначала должен получить доступ к нему для рисования. Для этого элемент <canvas> имеет метод getContext (). Метод getContext () принимает один параметр, тип контекста. Для 2D-графики, например, указывается «2d», чтобы получить CanvasRenderingContext2D.

Инициализация

Получить доступ к canvas для рисования (контекст)

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

По результату выполнения этих команд в переменной ctx находится ссылка на контекст для рисования, расположенный внутри canvas - элемента . Далее можно использовать все методы этого объекта.

Задать цвет заливки для рисуемого объекта

ctx.fillStyle = "#FF0000";

ctx.fillStyle='rgba(0,255,0,0.5)';

Задать цвет заливки для прямоугольника

ctx.fillRect(0,0,150,75);

Задать свойства линии

ctx.strokeStyle = "#0000ff";

ctx.lineWidth = 5;

ctx.strokeRect(10,10, 100,100);

Нарисовать линию

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

moveTo (x, y) - определяет начальную точку линии

lineTo (x, y) - определяет конечную точку линии

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

Нарисовать дугу

При рисовании дуги используются методы:

beginPath() - начинает путь

arc(x,y,r,startangle,endangle) - рисует дугу (координаты центра, радиус, угол начала дуги, угол конца дуги)

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

Прямоугольник

fillRect(x, y, width, height); - нарисовать залитый прямоугольник

strokeRect(x, y, width,height) - рисует контур прямоугольника, не заполняя его. Прямоугольник задаётся координатами левого верхнего угла (x, y), шириной и высотой.

clearRect(x, y, width, height) - стирает прямоугольник.

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

Стереть всё, очистить canvas

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height);

Нарисовать текст

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

ctx.strokeText("Hello World",10,50);

Линейный градиент

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);

Радиальный градиент

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);

Рисование кривой

Для рисования различных линий используются методы полученного контекста:

beginPath() - начало линии
closePath() - конец линии
moveTo (x, y) - при рисовании кривой используется виртуальное «перо» или «указатель». Этот виртуальный указатель всегда находится в некоторой точке. Перемещение виртуального указателя выполняется с помощью этой функции
lineTo() - рисует линию из места расположения виртуального указатнля в нужную точку, lineTo () также перемещает виртуальный указатель на конечную точку линии
stroke() , fill() - описанные выше функции только создают линию, реально не прорисовывая её на экране. Реальное рисование созданной линии производят функции stroke() , fill()
arcTo(x1,y1,x2,y2,r); - дуга между двумя касательными (в точке 1 и точке 2) с радиусом r

Пример:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); // Начали рисовать кривую
ctx.moveTo(20,20); // Переместили перо в начало линии
ctx.lineTo(100,20); // Отрезок горизонтальной линии
ctx.arcTo(150,20,150,70,50); // Дуга
ctx.lineTo(150,120); // Вертикальная линия
ctx.stroke(); // Нарисовать созданную кривую

Кривые Безье

context.quadraticCurveTo(cpx,cpy,x,y) - Метод quadraticCurveTo () добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют квадратичную кривую Безье. Квадратичная кривая Безье требует двух точек. Первая точка - контрольная точка, которая используется в квадратичном вычислении Безье, а вторая точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

cpx Х-координата контрольной точки Безье

cpy Y-координата контрольной точки Безье

x Х-координата конечной точки

y У-координата конечной точки

Пример:

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

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) - добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют собой кубическую кривую Безье. Кубическая кривая Безье требует трех точек. Первые две точки - это контрольные точки, которые используются в кубическом вычислении Безье, а последняя точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

cp1x Х-координата первой контрольной точки Безье

cp1y У-координата первой контрольной точки Безье

cp2x Х-координата второй контрольной точки Безье

cp2y Y-координата второй контрольной точки Безье

x Х-координата конечной точки

y У-координата конечной точки

Свойства и методы контекста

Цвета, стили и тени

Свойство	Описание
fillStyle	Устанавливает или возвращает цвет, градиент или картинку, используемые для заполнения рисунка
strokeStyle	Устанавливает или возвращает цвет, градиент или шаблон, используемый для линии
shadowColor	Устанавливает или возвращает цвет, используемый для теней
shadowBlur	Устанавливает или возвращает уровень размытия для теней
shadowOffsetX	Устанавливает или возвращает горизонтальное расстояние тени от формы
shadowOffsetY	Устанавливает или возвращает вертикальное расстояние тени от формы

	Описание
createLinearGradient()	Создает линейный градиент
createPattern()	Повторяет указанный элемент в указанном направлении
createRadialGradient()	Создает радиальный / круговой градиент
addColorStop()	Определяет цвета и позиции остановки в градиентном объекте

Стили линии

	Описание
lineCap	Стиль окончания линии
lineJoin	Стиль пересечения линий
lineWidth	Толшина линии
miterLimit	Устанавливает или возвращает максимальную длину

Прямоугольники

	Описание
rect()	Создаёт прямоугольник
fillRect()	Рисует запоненный прямоугольник
strokeRect()	Рисует контурный прямоугольник
clearRect()	Удаляет прямоугольную область

Линии

	Описание
fill()	Fills the current drawing (path)
stroke()	Actually draws the path you have defined
beginPath()	Begins a path, or resets the current path
moveTo()	Moves the path to the specified point in the canvas, without creating a line
closePath()	Creates a path from the current point back to the starting point
lineTo()	Adds a new point and creates a line to that point from the last specified point in the canvas
clip()	Clips a region of any shape and size from the original canvas
quadraticCurveTo()	Creates a quadratic Bézier curve
bezierCurveTo()	Creates a cubic Bézier curve
arc()	Creates an arc/curve (used to create circles, or parts of circles)
arcTo()	Creates an arc/curve between two tangents
isPointInPath()	Returns true if the specified point is in the current path, otherwise false

Преобразования

	Описание
scale()	Scales the current drawing bigger or smaller
rotate()	Rotates the current drawing
translate()	Remaps the (0,0) position on the canvas
transform()	Replaces the current transformation matrix for the drawing
setTransform()	Resets the current transform to the identity matrix. Then runs transform()

Текст

	Описание
font	Sets or returns the current font properties for text content
textAlign	Sets or returns the current alignment for text content
textBaseline	Sets or returns the current text baseline used when drawing text

	Описание
fillText()	Draws "filled" text on the canvas
strokeText()	Draws text on the canvas (no fill)
measureText()	Returns an object that contains the width of the specified text

Image Drawing

	Описание
drawImage()	Draws an image, canvas, or video onto the canvas

Pixel Manipulation

	Описание
width	Returns the width of an ImageData object
height	Returns the height of an ImageData object
data	Returns an object that contains image data of a specified ImageData object

	Описание
createImageData()	Creates a new, blank ImageData object
getImageData()	Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
putImageData()	Puts the image data (from a specified ImageData object) back onto the canvas

Compositing

	Описание
globalAlpha	Sets or returns the current alpha or transparency value of the drawing
globalCompositeOperation	Sets or returns how a new image are drawn onto an existing image

Other

	Описание
save()	Saves the state of the current context
restore()	Returns previously saved path state and attributes
createEvent()
getContext()
toDataURL()

Примеры

http://corehtml5canvas.com/code-live/

http://curran.github.io/HTML5Examples/

https://www.w3resource.com/html5-canvas/

https://www.sanwebe.com/2015/01/html5-canvas-examples

http://cssdeck.com/labs/image-nodes

WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

Наши преимущества

Регистрация на сайте

Дополнительные материалы

Ремонт и обслуживание PC