Урок - Прямоугольники

Главная » Курсы » Курс HTML5 Canvas » Урок - Прямоугольники

Обучающий онлайн курс
HTML5 Canvas

Лицензия: Копирование запрещено.

Прямоугольники

Canvas поддерживает несколько функция для рисования прямоугольников. Рассмотрим их по пордяку.

  • fillRect(x,y,width,height) - рисует заполненный прямоугольник
  • strokeRect(x,y,width,height) - рисует границы прямоугольника
  • clearRect(x,y,width,height) - очищает заданную область и делает её полностью прозрачной

Каждая из этих трёх функций принимает одинаковые параметры. x и y описывают позицию на холсте (относительно начала координат) верхнего левого угла прямоугольника, width - ширина, height - высота.

// при возникновении ошибки выведем сообщение.
try{
	// Получить контекст
	var canvas = document.getElementById('Example1');
	// Получить 2D контекст.
	// ! Можете инициализировать только один контекст для каждого элемента.
	var ctx = canvas.getContext('2d');
	

// Рисуем черны прямоугольник, с левым-верхним углом (25,25) и нижним-правым (100+25=125,100+25=125).
ctx.fillRect(25,25,100,100);
//	делаем прозрачным  прямоугольник, с левым-верхним углом (45,45) и нижним-правым (60+45=105,60+45=105).
ctx.clearRect(45,45,60,60);
//	рисуем границы прямоугольника, с левым-верхним углом (50,50) и нижним-правым (50+50=100,50+50=100).
ctx.strokeRect(50,50,50,50);
		

}
catch(err){
	alert('Ошибка');
}
РезультатОбновите браузер. Должно выглядеть так

В отличие от функций путей, которые мы увидим в следующей секции, все эти три функции рисуют на холсте немедленно.