Как расположить блок в центре с использованием JS Canvas?

Как я могу разместить блок шириной 120px по центру по оси X на canvas шириной 500px?
  • 10 июня 2024 г. 5:51
Ответы на вопрос 1
Для того чтобы разместить блок по центру по оси X на canvas, нужно сначала вычислить координату X, в которой блок будет находиться. 

В данном случае, чтобы разместить блок шириной 120px по центру canvas шириной 500px, нужно вычислить координату X следующим образом:

```javascript
// Ширина canvas
let canvasWidth = 500;

// Ширина блока
let blockWidth = 120;

// Координата X, в которой блок будет по центру canvas
let centerX = (canvasWidth - blockWidth) / 2;
```

Затем, чтобы отрисовать блок на canvas в найденной координате X, можно использовать следующий код:

```javascript
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

let blockHeight = 50; // Высота блока

// Установка цвета и отрисовка блока
ctx.fillStyle = 'blue'; // Цвет блока
ctx.fillRect(centerX, 0, blockWidth, blockHeight);
```

Где `myCanvas` - это id вашего canvas элемента в HTML. 

Таким образом, блок шириной 120px будет отрисован по центру canvas шириной 500px.
Похожие вопросы