Canvas поддерживает только одну примитивную фигуру - прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединённых в линии.
На примере, рассмотрим работу функций, с помощью которых можно создать прямоугольники;
<html>
<head>
<style>
#canvas{
background-color: darkkhaki;
}
</style>
<script>
function onLoadHandler() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
context.fillRect(25,25,150,100);
context.clearRect(45,45,110,60);
context.strokeRect(50,50,100,50);
}
</script>
</head>
<body onload = onLoadHandler()>
<canvas id="canvas">Обновите браузер!</canvas>
</body>
</html>
Пример 1.
Рис. 1. Прямоугольники.
В этом примере функция:
- fillRect() рисует заполненный прямоугольник;
- clearRect() очищает прямоугольную область;
- strokeRect() рисует контур прямоугольника.
Каждая из этих функций функций принимает 4 параметра:
fillRect(x, y, width, height)
strokeRect(x, y, width, height)
clearRect(x, y, width, height)
Где, x, y координаты положения верхнего левого угла прямоугольника в canvas (относительно начала координат); width и height ширина и высота прямоугольника.
В отличие от функций создания контуров, все три функции создания прямоугольников сразу же отображают прямоугольники на canvas.
Литература: