Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
0 likes95 views
Документ описывает использование элемента <canvas> в HTML5 для работы с графикой, включая создание изображений, анимаций и обработку видео. Он охватывает различные методы рисования фигур, применение градиентов, текстов и наложение изображений, а также рассматривает трансформации и взаимодействие с пользователем. В заключение представлены дополнительные ресурсы и библиотеки для дальнейшей работы с графикой в веб-приложениях.
![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](https://image.slidesharecdn.com/index-210927095508/85/Canvas-API-Odessa-Frontend-Meetup-18-6-320.jpg)
![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](https://image.slidesharecdn.com/index-210927095508/85/Canvas-API-Odessa-Frontend-Meetup-18-7-320.jpg)
![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](https://image.slidesharecdn.com/index-210927095508/85/Canvas-API-Odessa-Frontend-Meetup-18-9-320.jpg)
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
- 1. «Canvas API как инструмент для работы с графикой» Andrew Fedotiuk Front End Developer ( cc6.magister@gmail.com ) 1
- 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