Холст в HTML5

Элемент canvas используется для рисования графики на веб-странице.

Что такое холст?

Элемент canvas в HTML5 использует JavaScript для рисования графики на веб-странице.

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

Элемент canvas имеет несколько способов для рисования путей, коробок, кругов, символов и добавления изображений.

Создание элемента canvas

Добавьте элемент canvas на страницу HTML5.

Укажите id, ширину и высоту элемента:

Рисуем с JavaScript

Элемент canvas не имеет собственных способностей рисования. Все рисование должно быть проделано в JavaScript:

<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FFB900";
cxt.fillRect(10,10,150,75);
</script>

JavaScript использует id для нахождения элемента canvas:

var c=document.getElementById("myCanvas");

Затем создайте объект контекста:

var cxt=c.getContext("2d");

Объект getContext("2d") является встроенным объектом HTML5, со множеством методов для рисования путей, коробок, кругов, символов, изображений и многого другого.

Следующие две строчки рисуют желтый прямоугольник:

cxt.fillStyle="#FFB900";
cxt.fillRect(10,10,150,75);

Метод fillStyle красит его в желтый цвет, а метод fillRect указывает форму, позицию и размер.

Понимание координат

Метод fillRect выше имеет параметры (10,10,150,75).

Это означает: Рисование прямоугольника 140x65 на холсте, начинается с левого верхнего угла с координатами (10,10) и заканчивается в правом нижнем углу с координатами (150,75).

Координаты X и Y используются для позиционирования рисунков на холсте.

Проведите мышкой над прямоугольником внизу, чтобы увидеть координаты:

Больше примеров с холстом

Ниже приведены другие примеры рисования на элементе canvas:

Пример - линия

Рисует линию, указав, где начать, и где остановиться:

<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,75);
cxt.stroke();
</script>

Пример - Круг

Рисует круг, с указанным размером, цветом и положением:

<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#EFDB00";
cxt.beginPath();
cxt.arc(70,48,35,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

Пример - Градиент

Рисует градиент фона с цветами, которые вы указали:

<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,400,75);
grd.addColorStop(0,"#1B00FF");
grd.addColorStop(1,"#FFFFFF");
cxt.fillStyle=grd;
cxt.fillRect(0,0,400,125);
</script>

Пример - Изображение

Помещяет изображение на холсте:

<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/images/8-Makana-cliff-Hawaii-655.gif"
cxt.drawImage(img,0,0);
</script>