Как нарисовать прямоугольник на Canvas?
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 ,
месяц назад
@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. Он будет заполнен красным цветом и иметь контур.
15