В этой статье блога мы рассмотрим различные методы рисования прямоугольника на холсте HTML5 с использованием пользовательского ввода. Независимо от того, являетесь ли вы новичком или опытным разработчиком, эти простые в использовании примеры кода помогут вам создавать интерактивные прямоугольники на вашей веб-странице. Итак, давайте погрузимся и начнем рисовать!

Метод 1: использование функции context.fillRect() JavaScript.
Первый метод предполагает использование встроенной функции fillRect(), предоставляемой контекстом 2D-рендеринга Canvas. Эта функция принимает четыре параметра: координату x, координату y, ширину и высоту прямоугольника. Вы можете получить вводимые пользователем данные через поле ввода или любым другим способом, а затем использовать значения для динамического рисования прямоугольника.

// HTML
<canvas id="myCanvas"></canvas>
// JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
function drawRectangle(x, y, width, height) {
  ctx.fillRect(x, y, width, height);
}
// Getting user input
const userInput = prompt("Enter the x, y, width, and height values (comma-separated):");
const [x, y, width, height] = userInput.split(",").map(Number);
drawRectangle(x, y, width, height);

Метод 2: использование метода CanvasRenderingContext2D.rect().
Другой подход предполагает использование метода rect() для определения размеров прямоугольника, а затем использование метода fill() для его фактического рисования. Этот метод обеспечивает большую гибкость, позволяя изменять атрибуты прямоугольника перед его отображением на холсте.

// HTML and JavaScript setup same as Method 1
function drawRectangle(x, y, width, height) {
  ctx.beginPath();
  ctx.rect(x, y, width, height);
  ctx.fillStyle = "blue"; // Optional: Change rectangle color
  ctx.fill();
}
// Getting user input same as Method 1
drawRectangle(x, y, width, height);

Метод 3: рисование прямоугольника с помощью CSS
Если вы предпочитаете более простой подход без явного использования JavaScript, вы можете использовать возможности CSS для рисования прямоугольников. Установив цвет фона, ширину, высоту и положение элемента div, вы можете легко создать прямоугольник без использования кода JavaScript.

<style>
  .rectangle {
    background-color: red;
    width: 200px;
    height: 100px;
    position: absolute;
    /* Adjust position as per your requirement */
    left: 100px;
    top: 100px;
  }
</style>
<div class="rectangle"></div>

Рисование прямоугольников на холсте с использованием пользовательского ввода — важный навык в веб-разработке. В этой статье мы рассмотрели три разных метода, каждый из которых имеет свои преимущества. Методы 1 и 2 обеспечивают больше контроля и интерактивности, а метод 3 предлагает более простое решение на основе CSS. Следуя примерам кода, вы сможете легко реализовать прямоугольники в своих веб-проектах и ​​вывести проекты на основе холста на новый уровень.