Существует ряд инструментов для работы с графикой в Web, в том числе Canvas API. Он на первый взгляд простой и не разнообразный, но вполне позволяет создать полноценный мир, ограниченный только вашим воображением и количеством оперативной памяти. Андрей Федотюк знакомит с основными принципами, некоторыми фишками и рассказывает все от базовой геометрии до создания полноценной игры.

1. «Canvas API как инструмент для работы с графикой»
Andrew Fedotiuk
Front End Developer ( cc6.magister@gmail.com )
1

2. Вставить картинкой
DOM
SVG
Canvas
•
•
•
•
2

3. <canvas id="mainCanvas" width="640" height="480"> ? </canvas>
<canvas />
Создан компанией Apple в 2004 году, вошел в стандарт в 2006.
HTML элемент, является частью HTML5, позволяет на низком уровне
динамически
взаимодействовать с растровой графикой - визуализировать
данные, манипулировать
изображением, фотографиями, создавать
анимации и даже обрабатывать видео в реальном
времени.
3

4. 2d
Контекст рендеринга (canvas grid)
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext(" ");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 150);
Для того что бы отобразить на canvas что либо
необходимо получить доступ к его
контексту, в
данном
случае поговорим о 2D контексте.
01.
02.
03.
04.
05.
4

5. fillStyle
strokeStyle
fillRect
strokeRect
clearRect
Рисование фигур (прямоугольник)
В отличии от SVG на canvas можно рисовать только 2 фигуры:
прямоугольник и путь (списки точек,
соединенных линиями).
ctx. = "red";
ctx. = "#ccc";
ctx. (x, y, w, h);
ctx. (x, y, w, h);
ctx. (x, y, w, h);
01.
02.
03.
04.
05.
5

6. beginPath
moveTo
lineTo
closePath
stroke fill
lineWidth
lineCap
lineJoin
setLineDash
Рисование фигур -линия (путь)
У самурая нет цели, только путь...
Жизнь самурая Миямото Мусаси
ctx. ();
ctx. (x, y);
ctx. (x, y);
ctx. (); / -
ctx. (); / ctx. ();
ctx. = 10;
ctx. = "butt" || "round" || "square";
ctx. = "bevel" || "round" || "miter"
ctx. = [] || [1,1]
“01.
02.
03.
04.
05.
01.
02.
03.
04.
6

7. arc
arcTo
quadraticCurveTo
bezierCurveTo
Рисование фигур -дуга/кривая (путь)
ctx. (x,y,radius,startAngle,endAngle,[,counterclockwise])
ctx. (x1,y1,x2,y2,radius)
ctx. (cpx,cpy,endX,endY)
ctx. (cpx1,cpy1,cpx2,cpy2,endX,endY)
01.
02.
03.
04.
7

8. createLinearGradient
createRadialGradient
addColorStop
Градиенты
const linGrad = ctx. (startX, startY, endX, endY);
const radGrad = ctx. (startXin, startYin, rIn,
startXOut, startYOut, rOut);
someGrad. (offset, color);
А вот конический градиент внезапно поддерживается только в Firefox
01.
02.
03.
04.
05.
8

9. fillText
strokeText
font
textAlign
textBaseline
direction
measureText
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
Текст и тени
сtx. (text, x, y [, maxWidth]);
сtx. (text, x, y [, maxWidth]);
сtx. ="10px sans-serif"
сtx. ="start"
сtx. ="alphabetic" || top ||
hanging || middle || ideographic || bottom
сtx. ="inherit" || ltr || rtl
const text = сtx. ("text");
сtx. =float
сtx. =float
сtx. =float
сtx. =float
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.
04.
9

10. Изображение:
HTMLImageElement
SVGImageElement
HTMLVideoElement
HTMLCanvasElement
drawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
ctx. createPattern (image,"repeat" || "repeat-x" || "repeat-y" || "no-repeat");
•
•
•
•
10

11. imageSmoothingEnabled
globalCompositeOperation
globalAlpha
clip
Наложение слоев,сглаживание,маски
ctx. = boolean;
ctx. = type;
ctx. = 1;
ctx. ();
01.
02.
03.
04.
11

12. getImageData
toDataURL
toDataURL
toBlob
Работа с пикселями / сохранение canvas
const myImageData = ctx. (left, top, width, height);
canvas. ('image/png');
canvas. ('image/jpeg', quality);
canvas. (_callback_, _type_, _encoderOptions_)
01.
02.
03.
04.
05.
12

13. События и анимация
Как таковых ивентов в canvas нет , но мы всегда можем использовать
DOM-ивенты, а так же рисовать
на canvas по истечению определенного
времени. Для этого можно использовать несколько методов:
setInterval(function, delay)
setTimeout(function, delay)
requestAnimationFrame(callback)
•
•
•
13

14. Разделение на слои и хитбоксы
14

15. save
restore
translate
rotate
scale
Трансформации и повороты
ctx. ()
ctx. ()
ctx. (x, y)
ctx. (angle)
ctx. (x,y)
01.
02.
03.
04.
05.
06.
15

16. Что же дальше?
Konva.js (by Anton Lavrenov)
PIXI.js
Phaser.js
three.js
babylon.js
playcanvas
•
•
•
•
•
•
16

17. Ресурсы
shower(движок презентации)
developer.mozilla
w3schools
stackoverflow
html5gamedevs (форум)
GameDev for Web (телеграм чатик где всегда помогут)
1.
2.
3.
4.
5.
6.
17

18. 18

19. Спасибо за
внимание
19