Вы здесь: Главная > Материалы на Русском языке > Дополнительные статьи > HTML5 - элемент CANVAS, рисование
WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Узнать подробнее
Регистрация на сайте
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(); // Нарисовать созданную кривую
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();
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