Тег Canvas: - для рисования графиков, - для создания фото-композиций, - для создания простых (и не очень) анимаций.

1. Canvas
Alex Milkovskyi

2. План
1. Уведение
2. Координатная сетка
3. Импортирование картинок
4. Применение стилей и цветов
5. Текст
6. Градиенты
7. IE

3. 1. Уведение

4. Canvas
● для рисования графиков,
● создания фото-композиций,
● или для создания простых (и не очень)
анимаций.

5. Код выглядит так.
<canvas width="300" height="225"></canvas>
У вас может быть несколько элементов
<canvas> на одной странице. Каждый холст
будет отображаться в DOM и сохранять свое
собственное состояние.

6. Если браузер не поддерживает
Canvas
<canvas id="stockGraph" width="150" height="
150">
Чувак, установи норм браузер!
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150"
height="150" alt=""/>
</canvas>

7. Атрибут id
Если вы добавите каждому холсту атрибут
id, то можете получить к ним доступ, как и к
любому другому элементу.
<canvas id="canvas" width="150" height="150"
> </canvas>

8. DOM-метод getContext
● Элемент canvas имеет DOM-метод,
называемый getContext, и
предназначенный для получения
контекста отрисовки вместе с его
функциями рисования. getContext()
принимает один параметр - тип контекста.
● Мы сфокусируемся на 2D

9. Проверка поддержки
var canvas = document.getElementById
('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
Минимальный шаблон: загрузить этот файл

10. Простой пример
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}

11. fillRect() рисует прямоугольник
Вызов метода fillRect() рисует
прямоугольник и заполняет его текущим
стилем заливки, исходно черный цвет, пока
вы его не измените. Прямоугольник
задается левым верхним углом (50, 25),
шириной (150) и высотой (100). Чтобы лучше
представить, как это работает, давайте
посмотрим на систему координат.

12. 2. Координатная сетка

13. Рисование фигур
● В отличие от SVG, canvas поддерживает
только одну примитивную форму -
прямоугольники.
● Все другие формы могут быть созданы
комбинацией одного или нескольких
путей.

14. Прямоугольники
1. fillRect(x,y,width,height) : Рисует
заполненный прямоугольник
2. strokeRect(x,y,width,height) : Рисует
границы прямоугольника
3. clearRect(x,y,width,height) : Очищает
заданную область и делает её полностью
прозрачной

15. Пример рисования
прямоугольников
function draw(){
var canvas = document.getElementById
('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}

16. Рисование путей
● beginPath() начальная точка установлена в позиции (0,0)
● closePath()
● stroke() прорисовывает фигуру
● fill() прорисовывает фигуру
● moveTo(x, y)
● lineTo(x, y);

17. Рисование путей
// Залитый треугольник
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Очерченный треугольник
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();

18. Дуги
arc(x, y, radius, startAngle, endAngle,
anticlockwise)
startAngle, endAngle - определяют точки
начала и конца арки в радианах
var radians = (Math.PI/180)*degrees
anticlockwise - если true, то дуга рисуется
против часовой стрелки

19. Дуги
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Внешний круг
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Рот
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Левый глаз
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Правый глаз
ctx.stroke();

20. кривые Безье и квадратичные
кривые
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

21. пример использования кривых
Безье
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();

22. 3. Импортирование
картинок

23. Обычно импортирование картинок
происходит в два этапа:
● Сначала нам нужна ссылка на объект
JavaScript Image или на другой элемент
canvas, как источник. Невозможно
использовать картинки просто передавая
URL/путь до них.
● Потом мы рисуем картинку на canvas,
используя функцию
drawImage(image, x, y, [width, height]).

24. Вставка картинки
var ctx = document.getElementById('canvas'). getContext
('2d');
var img = new Image();
img.src = 'images/backdrop.png';
// или var img = document.getElementById('img');
// или var img = $('#img');
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.stroke();
}

25. Разрезание изображений
drawImage(
image, - идентификатор
изображения
sx, sy, - координаты
вырезаного изображения
sWidth, sHeight, - высоту и
ширину вырезаного
изображения.
dx, dy, - координаты
изображения на холсте
dWidth, dHeight - масштаб
изображения
)

26. Пример 3 использования
изображения
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Draw slice
ctx.drawImage(document.getElementById('source'),
33,71,104,124,21,20,87,104);
// Draw frame
ctx.drawImage(document.getElementById('frame'),0,0);
}

27. 4. Применение стилей и
цветов

28. fillStyle в значение 'orange'
1. ctx.fillStyle = "orange";
2. ctx.fillStyle = "#FFA500"; // #FA0
3. ctx.fillStyle = "rgb(255,165,0)";
4. ctx.fillStyle = "rgba(255,165,0,1)";
// Прозрачность
ctx.globalAlpha = 0.2;

29. 5. Текстик

30. ● font может содержать все, что вы бы добавили в
свойство CSS font. Включает стиль шрифта,
насыщенность, размер, межстрочное расстояние и
семейство гарнитур.
● textAlign управляет выравниванием текста. Похоже
на свойство CSS text-align, но не идентично ему.
Возможные значения: start,end, left, right и center.
● textBaseline говорит где рисуется текст относительно
начальной точки. Возможные значения: top, hanging,
middle, alphabetic,ideographic и bottom.
Текст

31. ctx.font = "bold 12px sans-serif";
ctx.textBaseline = "top";
ctx.fillText("blablablablba", 10, 43);
ctx.fillText("fafa", 58, 5);
Текст

32. 6. Градиентик

33. Линейный
createLinearGradient(x0, y0, x1, y1) рисует вдоль линии
от (x0, y0) до (x1, y1).
Радиальный (в IEне пашет)
createRadialGradient(x0, y0, r0, x1, y1, r1) рисует по
конусу между двумя окружностями. Первые три
параметра определяют начальную окружность с
центром (x0, y0) и радиусом r0. Последние три
параметра представляют последнюю окружность с
центром (x1, y1) и радиусом r1.
Градиенты

34. Линейный
var my_gradient = context.createLinearGradient(0, 0, 300,
225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

35. Анимация
Demo....

36. Кроссбраузерность
● IE - 7.0 + *
● Firefox - 3.0+
● Safari - 3.0+
● Chrome - 3.0+
● Opera - 10.0+
* Internet Explorer поддерживает только с
библиотекой explorercanvas.

37. Что насчет IE?
Microsoft Internet Explorer (до версии 8 включительно,
текущая версия на момент написания статьи) не
поддерживает API Canvas. Тем не менее, Internet
Explorer поддерживает фирменную технологию
Майкрософт, называемую VML, которая может делать
многие из тех же вещей, что и элемент <canvas>. Так и
родился excanvas.js.
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->

38. Всем спс
1. https://developer.mozilla.
org/ru/Обучение_canvas
2. http://htmlbook.ru/html5/canvas