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

В Canvas предопределены методя для создания прямоугольников.

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

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

Все три метода принимают параметры:
x, y — координата левого верхнего угла прямоугольника.
width, height — ширина и высота прямоугольника

Вот так это выглядит на практике:

var canvas = document.getElementById(«canvas»);
if (canvas.getContext){
var ctx = canvas.getContext(‘2d’);

    ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);   

  } else {
alert(‘Браузер не поддерживает Canvas.’);
}

В деле можно взглянуть тут.

Если вы ещё не в курсе как рисовать в Canvas вам сюда.

Похожий код:

Фото аватара
Алексей Петров

Программист, разработчик с 5 летним опытом работы. Учусь на разработчика игр на Unity и разработчика VR&AR реальности (виртуальной реальности). Основные языки программирования: C#, C++.

Оцените автора
Бла, бла код
Добавить комментарий