Мой Справочник | JS | Canvas

Мой Справочник | JavaScript | Canvas - Фигуры

ctx.fillRect
Прямоугольник с заливкой	`ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; // Цвет заливки ctx.fillRect(10, 10, 310, 170);`	10, 10 - координаты верх. лев. угла (x, y) 310 - ширина, 170 - высота (в пикселях)
ctx.strokeRect
Прямоугольник без заливки	`ctx.strokeStyle = 'blue';// Цвет обводки ctx.strokeRect(75, 0, 150, 150);`	75, 0 - координаты верх. лев. угла (x, y) 150 - ширина, 150 - высота (в пикселях)
ctx.clearRect
Очистка холста	`ctx.clearRect(0, 0, 300, 150);`	Указываются нулевые координаты и ширина и высота всего золста
Path
Сложные фигуры (Контуры)	`ctx.beginPath(); // Начало контура ctx.moveTo(x, y); // Перенести перо // Рисовать от точки перемещения до указанной ctx.lineTo(x, y); // Перемещать по нелинейной функции Безье (x,y в конце) ctx.bezierCurveTo(140, 90, 110, 90, 100, 100); ctx.closePath(); // Конец контура`
Градиент
Линейный	`var gradient = ctx.createLinearGradient(0, 0, 300, 150); // Колорстопы gradient.addColorStop(0, 'green'); gradient.addColorStop(1, 'rgba(0, 255, 0, 0)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 300, 150);`
Радиальный	`var gradient = ctx.createRadialGradient(150, 72, 0, 150, 72, 72); // Колорстопы gradient.addColorStop(0, 'green'); gradient.addColorStop(1, 'rgba(0, 255, 0, 0)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 300, 150);`