HTML5 Canvas
- Предыдущая страница Атрибуты форм ввода HTML
- Следующая страница HTML5 SVG
Элемент canvas используется для рисования графиков на веб-странице.
Что такое Canvas?
Элемент canvas в HTML5 использует JavaScript для рисования изображений на веб-странице.
Рамка является прямоугольной областью, каждый пиксель которой можно контролировать.
Canvas имеет множество методов для рисования траекторий, прямоугольников, кругов, символов и добавления изображений.
Создание элемента Canvas
Добавление элемента canvas в страницу HTML5.
Определяет идентификатор элемента, ширину и высоту:
<canvas id="myCanvas" width="200" height="100"></canvas>
Рисование с помощью JavaScript
Элемент canvas сам по себе не имеет способности к рисованию. Все рисование должно выполняться внутри JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript использует идентификатор для поиска элемента canvas:
var c=document.getElementById("myCanvas");
Затем создайте объект контекста:
var cxt=c.getContext("2d");
Объект getContext("2d") является встроенным объектом HTML5, который имеет множество методов для рисования траекторий, прямоугольников, кругов, символов и добавления изображений.
Ниже приведены строки кода, рисующие красный прямоугольник:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Метод fillStyle красит его красным, а метод fillRect определяет форму, положение и размер.
Понимание координат
Метод fillRect имеет параметры (0,0,150,75).
Это означает: нарисуйте прямоугольник 150x75 на канвасе, начиная с верхнего левого угла (0,0).
Как показано на рисунке, координаты X и Y на канвасе используются для позиционирования рисунков на канвасе.
Пример: наведите указатель мыши на прямоугольник, чтобы увидеть координаты
Более сложные примеры Canvas
Ниже приведены дополнительные примеры рисования на элементе canvas:
Пример - линия
Рисуйте линию, указав точку начала и конца:
Код JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Элемент canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ваш браузер не поддерживает элемент canvas. </canvas>
Пример - круг
Рисуйте круг, указав размер, цвет и положение:
Код JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Элемент canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ваш браузер не поддерживает элемент canvas. </canvas>
Пример - градиент
Используйте указанный вами цвет для рисования градиентного фона:
Код JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Элемент canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ваш браузер не поддерживает элемент canvas. </canvas>
Пример - изображение
Поместите изображение на канву:
Код JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Элемент canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Ваш браузер не поддерживает тег HTML5 canvas. </canvas>
Уроки HTML Canvas
Чтобы узнать больше о канвах, пожалуйста, посетите наш Уроки HTML Canvas.
- Предыдущая страница Атрибуты форм ввода HTML
- Следующая страница HTML5 SVG
