Обработка нажатий в canvas

Question

 <canvas id='example'>Обновите браузер</canvas>
        <script>
            var example = document.getElementById("example"),
                ctx     = example.getContext('2d');
            example.width  = 640;
            example.height = 480;
             ctx.fillRect(25,25,100,100);

        </script>

У меня есть вод такой код который рисует в канвасе квадрат. Могу ли я обработать событие - нажатие на этот квадрат. Т.е. к примеру дать этому квадрату id1 и при нажатии перейти на page?id=1 ?

Answer 1

Добавил две фигуры методами Path2D(). Каждой фигуре задал id. При клике по canvas смотрю попало ли нажатие на какую-нибудь фигуру и получаю id этой фигуры. Обработчик можно дальше ставить любой.

Конечно, и фигуры можно добавлять более программно. Можно картой фрагментов (подготовить все пути в векторном редакторе), заносить эти пути в json, например и давать им осознанные атрибуты.

var example = document.getElementById("example"),
ctx = example.getContext('2d');
example.width  = 640;
example.height = 480;

let rectangle1 = new Path2D();
rectangle1.rect(25,25,100,100);
rectangle1.id = 1;
ctx.fill(rectangle1);

let rectangle2 = new Path2D();
rectangle2.rect(150,25,100,100);
rectangle2.id = 2;
ctx.fill(rectangle2);

let figures = [rectangle1, rectangle2];

example.onclick = e => {
  figures.forEach(f => {
    if(ctx.isPointInPath(f, e.offsetX, e.offsetY)){
      console.log(f.id);
    }
  })
}

<canvas id='example'>Обновите браузер</canvas>

БЛОГ НА HUSL

Обработка нажатий в canvas

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