В этой статье я решил рассказать о принципах рисования в canvas. Это поможет понять как рисовать более сложные объекты.
Нарисуем два треугольника. Не слишком шикарно, но удобно рассматривать принцип построения.
Прежде всего оприделим тег canvas:
<canvas id="canvas" height="150" width="150"> </canvas>
братите внимание, что необходимо указывать размеры блока! Если блок будет меньше изображение отрисованного canvas оно будет обрезано.
Теперь создадим функцию JavaScript для отрисовки изображения — draw().
В ней первым делом найдём необходимый элемент DOM и поместим в желаемую переменную.
var canvas = document.getElementById('canvas');
Сделаем проверку на поддержку Canvas:
if (canvas.getContext)
Если всё прошло хорошо выбираем контент для рисования:
var ctx = canvas.getContext('2d');
Начинаем рисовать:
ctx.beginPath();
Определяем начальную точку:
ctx.moveTo(25,25);
И перемещаемся рисуя ломаную линию:
ctx.lineTo(105,25); ctx.lineTo(25,105);
Аргументы методов — координаты на полотне.
Зальём треугольник цветом:
ctx.fill();
Для создания не залитой фигуры проделываем аналогичные функции но в конце заменяем метод fill() на stroke()
Пример.
ps цвет можно изменить при помощи:
ctx.fillStyle = "rgb(rr,gg,bb)";
