JS Canvas - Проблема с отрисовкой

Question

{   function create (){
    let x = 50,
    y = 100;

for (let i = 0; i < num; i++) {

    if (i === num / 2) {
        x = 0;
        y = 200;
        console.log("Привет")
    } // условие на будущее, в случаи увеличения количества елементов;



    block[i] = {
        "number": random(13), /// 12 блоков с рандомным числом.
        "x": x += 10,
        "y": y,
    }


}


ctx.fillStyle = "silver";
ctx.fillRect(block[2].x, block[2].y, block[2].x, block[2].y);

 }

Когда координаты первой точки и последней одинаковы создает квадрат, хотя я ожидаю пустоту.

Почему?

Answer 1

Третье и четвертое значение передает размеры а не координаты последней точки

Answer 2

Метод CanvasRenderingContext2D.fillRect() принимает четыре параметра:

x - координаты начальной точки по оси X

y - координаты начальной точки по оси Y

width - ширина прямоугольника (может быть отрицательной или 0)

height - высота прямоугольника (может быть отрицательной или 0)

То есть в вашем случае выражение должно выглядеть следующим образом:

ctx.fillRect(block[2].x, block[2].y, 0, 0);

CanvasRenderingContext2D.fillRect()

БЛОГ НА HUSL

JS Canvas - Проблема с отрисовкой

Ответы (2 шт):