Canvas HTML5

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы научились работать с audio в HTML5. В данной статье я бы хотел рассказать об элементе canvas в HTLM5. Canvas представляет собой некий холст, на котором можно рисовать, выводить различные элементы. Сразу скажу, что рисование полностью происходит посредством Javascript. Раньше рисование обычно реализовывалось на PHP, что сильно нагружало сервер, теперь же с появлением данной возможности, функцию рисования можно полностью повесить на браузер. В canvas мы можем вывести различные линии, фигуры, картинки, текст.

Давайте для начала создадим холст размером 450 на 450 пикселей:

<!DOCTYPE html5>
<html>
<head>
	<title>Canvas в HTML5</title>
	<meta charset="utf-8"/>
</head>
<body>
<canvas id = "canvas" height = "450px" width = "450px">
Ваш браузер не поддерживает canvas. Обновите его.
</canvas>
</body>
</html>

Давайте теперь с помощью Javascript попробуем что-нибудь нарисовать. Для примера нарисуем пятиугольник:

<script>
var canvas = document.getElementById("canvas").getContext("2d");// теперь можно рисовать что-то двухмерное
function drawFigure() {
	canvas.beginPath(); // говорим браузеру, что будем рисовать многоугольник
	canvas.moveTo(100,100); //определяем точку, из которой будем рисовать (относительно canvas)
	canvas.lineTo(150,150); //проводим линию из начальной точки в новую (точка 2)
	canvas.lineTo(180,80); //проводим линию из точки 2 в новую (точка 3)
	canvas.lineTo(150,40); //проводим линию из точки 3 в новую (точка 4)
	canvas.lineTo(120,40); //проводим линию из точки 4 в новую (точка 5)
	canvas.closePath(); //заканчиваем рисовать многоугольник
	canvas.stroke(); //выводим наши художества	
}
drawFigure(); 
</script>

После запуска данной страницы в браузере мы увидим наш пятиугольник.

Давайте теперь нарисуем прямоугольник. Данный элемент можно нарисовать таким же образом (проводя последовательно из точки в точку линию), но лучше использовать стандартный метод fillRect(Координата x, координата y, ширина прямоугольника, высота прямоугольника). Данный метод нарисует черный прямоугольник:

function drawRectangle() {
	canvas.strokeStyle = "red"; //цвет границ прямоугольника
	canvas.fillStyle = "yellow"; //меняем цвет заливки, по умолчанию черный
	canvas.fillRect(200, 250, 100, 100); // рисуем залитый прямоугольник
	canvas.clearRect(220,270,40,40); //рисуем прямоугольник без заливки
	canvas.strokeRect(120,170,80,60); //рисуем прямоугольник без заливки с границами
}
drawRectangle();

Метод clearRect() нарисует прямоугольник без заливки. На белом фоне его видно не будет.
Метод strokeRect() нарисует прямоугольник с границами, также без заливки. Толщину границ линии можно изменить с помощью метода lineWidth:

canvas.lineWidth = 5;

Также в canvas можно рисовать текст. Делается это следующим образом:

function drawText() {
	canvas.fillStyle = "red"; //задаем цвет текста
	canvas.font = "20px Verdana"; //задаем стили текста
	canvas.fillText("Canvas HTML5", 300, 150);	
}
drawText();

Метод fillText() первым параметром принимает выводимую надпись, а вторым и третьим — координаты x и y.

Давайте теперь разберемся, как выводить картинки. Делается это с помощью метода drawImage():

function drawImg() {
	var img = document.createElement("img"); //создаем картинку
	img.src = "1.jpg"; //указываем какую картинку выводить
	img.onload = function() {
		canvas.drawImage(img,300,300);
	}
}
drawImg();

Для начала картинку нужно создать с помощью объектной модели Javascript (Document Object Model или DOM). img.onload обязательно нужно указывать для того, чтобы сначала картинка прогрузилась, а уже потом рисовать её. Некоторые браузеры смогут отобразить всё нормально и без onload.

Давайте теперь попробуем нарисовать прямоугольник, залитый градиентом. Делается это следующим образом:

function drawGradient() {
	var grd=canvas.createLinearGradient(20,0,200,0);
	grd.addColorStop(0,"#FF0000"); 
	grd.addColorStop(0.5,"#00FF00");
	grd.addColorStop(1,"#0000FF");
	canvas.fillStyle=grd;
	canvas.fillRect(0,0,200,50);
}
drawGradient();

В данном случае метод createLinearGradient(20,0,200,0) рисует линию от точки с координатами (20,0) до точки (200,0). Метод addColorStop() задаёт цвета для градиента. Наберите пример и вы всё поймёте. Затем мы свойству fillStyle присваиваем градиент и рисуем им прямоугольник.

Напоследок нарисуем круг с помощью метода arc(x,y,радиус,начальный_угол,конечный_угол), где x и у — центр круга:

function drawArc() {
	canvas.fillStyle="green";
	canvas.beginPath();
	canvas.arc(300,190,20.5,0,Math.PI * 2);
	canvas.closePath();
	canvas.fill();
}
drawArc();

Для закрепления материала хотел реализовать вот такую задачу: необходимо динамически создавать точки и последовательно соединять их между собой красной линией. Точки на canvas должны иметь случайное местоположение, задержка между соединением точек — 1 секунда. Также создать кнопку, по нажатию на которую рисование будет останавливаться. По повторному нажатию процесс будет снова запускаться с той же самой точки. Собственно сам скрипт (вопросы по поводу работы скрипта оставляйте в комментариях, также, как и вопросу по его улучшению):

Подсмотреть код реализации

<!DOCTYPE html5>
<html>
<head>
	<title>Соединение точек HTML5</title>
	<meta charset="utf-8"/>
</head>
<body>
<canvas id = "canvas" height = "550px" width = "550px">
Ваш браузер не поддерживает canvas. Обновите его.
</canvas>
<input type = "button" id = "stop" value = "Stop" width = "100px" height = "50px"/>
<script>
var canvas = document.getElementById("canvas").getContext("2d");
function drawLine(x,y) {
	canvas.lineTo(x,y);
	canvas.stroke();
}

function drawXPoint() {
	var x = 530 * Math.random() + 10;
	return x;
}

function drawYPoint() {
	var y = 530 * Math.random() + 10;
	return y;
}

function draw() {
	var x = drawXPoint();
	var y = drawYPoint();
	drawLine(x,y);
}

var x = drawXPoint();
var y = drawYPoint();
canvas.fillStyle = "red";
canvas.moveTo(x,y);

var intervaId = setInterval(draw, 1000);
canvas.stroke();

var but = document.getElementById("stop");

but.addEventListener("click", function() {
	var butValue = but.value;
	if (butValue == "Stop") {
		but.value = "Start";
		clearInterval(intervaId);
	} else {
		but.value = "Stop";
		intervaId = setInterval(draw, 1000);
	}
});
</script>
</body>
</html>

В качестве домашнего задания попробуйте нарисовать рожицу. Сделайте, чтобы глаза у этой рожицы моргали