HTML5 прямоугольник холста

Последнее обновление 29 мая 2019 07:00:42 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Рисовать прямоугольники

Чтобы нарисовать прямоугольник, укажите координаты x и y (верхний левый угол), а также высоту и ширину прямоугольника. Есть три прямоугольных метода:

FillRect ()
strokeRect ()
clearRect ()

Метод fillRect ()

Метод fillRect () используется для заливки прямоугольника в текущем цвете, градиенте или шаблоне.

Синтаксис:

 ctx .fillRect (x, y, ширина, высота)

параметры	Тип	Описание
Икс	число	Координата x (в пикселях), верхний левый угол прямоугольника относительно координат холста.
Y	число	Координата y (в пикселях) верхнего левого угла прямоугольника относительно координат холста.
ширина	число	Ширина (в пикселях) прямоугольника.
рост	число	Высота (в пикселях) прямоугольника.

Примечание. Если параметр width или height равен нулю, этот метод не имеет никакого эффекта.

Пример: прямоугольник HTML5 Canvas с использованием метода fillRect ()

Следующий веб-документ заполняет прямоугольник свойством fillStyle.

Выход:

Код:

<!DOCTYPE html>
<html>
<head>
<title>Rectangle example</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
  var ctx = canvas.getContext('2d');
  ctx.fillStyle='#fa4b2a';    // color of fill
  ctx.fillRect(10, 40, 140, 160); // create rectangle  
}
</script>
</body> 
</html>

Метод strokeRect ()

Метод strokeRect () используется для заливки прямоугольника в текущем цвете, градиенте или шаблоне.

Синтаксис:

 ctx .strokeRect (x, y, ширина, высота)

параметры	Тип	Описание
Икс	число	Координата x (в пикселях), верхний левый угол прямоугольника относительно координат холста.
Y	число	Координата y (в пикселях) верхнего левого угла прямоугольника относительно координат холста.
ширина	число	Ширина (в пикселях) прямоугольника.
рост	число	Высота (в пикселях) прямоугольника.

Пример: прямоугольник HTML5 Canvas с использованием метода fillRect ()

Веб-документ рисует прямоугольники, используя strokeStyle, lineJoin и lineWidth для различных эффектов.

Выход:

Код:

<!DOCTYPE html>
<html>
<head>
<title>Rectangle example</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas>  
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
 var ctx = canvas.getContext('2d');
 ctx.lineWidth ="3";
 ctx.strokeStyle ="red";
 ctx.strokeRect(5, 5, 300, 250);
 ctx.lineWidth ="25";
 ctx.lineJoin ="bevel";
 ctx.strokeStyle ="blue";
 ctx.strokeRect(150, 200, 300, 150);
 ctx.lineJoin ="round";
 ctx.lineWidth ="45";
 ctx.strokeStyle ="green";
 ctx.strokeRect(250, 50, 150, 250);
}
</script>
</body> 
</html>

Метод clearRect ()

Метод clearRect () используется для очистки прямоугольника (стереть область до прозрачного черного цвета).

Синтаксис:

 ctx .clearRect (x, y, ширина, высота)

параметры	Тип	Описание
Икс	число	Координата x (в пикселях), верхний левый угол прямоугольника относительно координат холста.
Y	число	Координата y (в пикселях) верхнего левого угла прямоугольника относительно координат холста.
ширина	число	Ширина (в пикселях) прямоугольника.
рост	число	Высота (в пикселях) прямоугольника.

Пример: прямоугольник HTML5 Canvas с использованием метода clearRect ()

Веб-документ рисует ряд прямоугольников, используя методы fillRect () и clearRect ().

Выход:

Код:

<!DOCTYPE html>
<html>
<head>
<title>Rectangle example</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
 var ctx = canvas.getContext('2d');
 ctx.fillStyle='green';    // color of fill
 var y=40, h=300, w=260;
for (var x = 10; x!=140; x=x+10)   
 {
   ctx.fillRect(x, y, h, w); 
   ctx.clearRect(x+5, y+5, h-10, w-10); 
   y=y+10;   
   h=h-20;
   w=w-20;   
  }  
}
</script>
</body> 
</html>

Редактор кода:

См. Общий редактор Pen html css от w3resource ( @ w3resource ) в CodePen .

Предыдущий: HTML5 учебник по холсту
Далее: HTML5 Canvas: градиенты и шаблоны