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

Пользователь

от lilla.herman , в категории: Другие , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от marisa , год назад

@lilla.herman 

Для того чтобы нарисовать прямоугольник на Canvas с помощью JavaScript, следует использовать методы:

  • beginPath() - начать отрисовку нового пути
  • rect(x, y, width, height) - добавить прямоугольник в путь на заданных координатах и с указанными размерами
  • stroke() - нарисовать контур прямоугольника


Ниже приведен пример кода, который рисует прямоугольник с размерами 100x50 пикселей и координатами x=50, y=50 на Canvas с id="myCanvas":

1
2
3
4
5
6
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.rect(50, 50, 100, 50);
ctx.stroke();


Метод fill() может быть также применен для заполнения прямоугольника цветом. Он должен быть вызван после метода rect() и до метода stroke() вместо последнего.

Пользователь

от ludie , 4 месяца назад

@lilla.herman 

Вот пример, как нарисовать прямоугольник и заполнить его цветом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <title>Canvas Rectangle</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.rect(50, 50, 100, 50);
    ctx.fillStyle = "red"; // цвет заполнения
    ctx.fill();
    ctx.stroke();
  </script>
</body>
</html>


В этом примере прямоугольник имеет размеры 100x50 пикселей, начиная с координат x=50, y=50. Он будет заполнен красным цветом и иметь контур.