CanvasAlex Milkovskyi

План

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

1. Уведение

Canvas

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

анимаций.

Код выглядит так.

<canvas width="300" height="225"></canvas>

У вас может быть несколько элементов <canvas> на одной странице. Каждый холст будет отображаться в DOM и сохранять свое собственное состояние.

Если браузер не поддерживает 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>

Атрибут id

Если вы добавите каждому холсту атрибут id, то можете получить к ним доступ, как и к любому другому элементу.

<canvas id="canvas" width="150" height="150"> </canvas>

DOM-метод getContext

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

● Мы сфокусируемся на 2D

Проверка поддержки

var canvas = document.getElementById('tutorial');if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here} else { // canvas-unsupported code here}

Минимальный шаблон: загрузить этот файл

Простой пример

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); } }

fillRect() рисует прямоугольник

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

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

Рисование фигур

● В отличие от SVG, canvas поддерживает только одну примитивную форму - прямоугольники.

● Все другие формы могут быть созданы комбинацией одного или нескольких путей.

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

1. fillRect(x,y,width,height) : Рисует заполненный прямоугольник

2. strokeRect(x,y,width,height) : Рисует границы прямоугольника

3. clearRect(x,y,width,height) : Очищает заданную область и делает её полностью прозрачной

Пример рисования прямоугольников

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); }}

Рисование путей

● beginPath() начальная точка установлена в позиции (0,0)

● closePath()● stroke() прорисовывает фигуру

● fill() прорисовывает фигуру

● moveTo(x, y)● lineTo(x, y);

Рисование путей

// Залитый треугольник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();

Дуги

arc(x, y, radius, startAngle, endAngle, anticlockwise)

startAngle, endAngle - определяют точки начала и конца арки в радианахvar radians = (Math.PI/180)*degrees

anticlockwise - если true, то дуга рисуется против часовой стрелки

Дуги

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();

кривые Безье и квадратичные кривые

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();

пример использования кривых Безье

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();

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

Обычно импортирование картинок происходит в два этапа:

● Сначала нам нужна ссылка на объект JavaScript Image или на другой элемент canvas, как источник. Невозможно использовать картинки просто передавая URL/путь до них.

● Потом мы рисуем картинку на canvas, используя функцию drawImage(image, x, y, [width, height]).

Вставка картинки

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();}

Разрезание изображений

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

Пример 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);}

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

fillStyle в значение 'orange'

1. ctx.fillStyle = "orange"; 2. ctx.fillStyle = "#FFA500"; // #FA03. ctx.fillStyle = "rgb(255,165,0)"; 4. ctx.fillStyle = "rgba(255,165,0,1)";

// Прозрачностьctx.globalAlpha = 0.2;

5. Текстик

● font может содержать все, что вы бы добавили в свойство CSS font. Включает стиль шрифта, насыщенность, размер, межстрочное расстояние и семейство гарнитур.

● textAlign управляет выравниванием текста. Похоже на свойство CSS text-align, но не идентично ему. Возможные значения: start,end, left, right и center.

● textBaseline говорит где рисуется текст относительно начальной точки. Возможные значения: top, hanging, middle, alphabetic,ideographic и bottom.

Текст

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

Текст

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

ЛинейныйcreateLinearGradient(x0, y0, x1, y1) рисует вдоль линии от (x0, y0) до (x1, y1).

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

Градиенты

Линейный

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);

Анимация

Demo....

Кроссбраузерность

● IE - 7.0 + *● Firefox - 3.0+● Safari - 3.0+● Chrome - 3.0+● Opera - 10.0+

* Internet Explorer поддерживает только с библиотекой explorercanvas.

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

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

Всем спс

1. https://developer.mozilla.org/ru/Обучение_canvas

2. http://htmlbook.ru/html5/canvas