Блог

я собираюсь создать небольшой вызов для своей команды, который аналогичен вызову honeycomb candy в игре серии Squid от Netflix.
Идея заключается в том, что пользователь будет использовать щелчок мыши, чтобы создать точку вокруг фигуры, затем я буду использовать api контекста холста, чтобы нарисовать другую фигуру из этих точек.
Пример:

 var canvas = document.body.appendChild(document.createElement("CANVAS")), context = canvas.getContext("2d");

context.beginPath();
  // all points are given as x (from left to right), y (from top to bottom)
  context.moveTo(10, 20); // x = 10 (10 px from the left edge of the canvas), y = 20 (20 px from the top edge of the canvas)
  context.lineTo(100, 97); // x = 100, y = 97
  context.lineTo(50, 105); // x = 50, y = 100

context.stroke();
 

наконец, я сравню эту форму с исходной формой, если они одинаковые, то пользователь выиграет.
кто-нибудь знает, как сравнить две одинаковые формы в js? или мне нужно сравнить каждую точку двух фигур?

Нет простого способа сравнить фигуры, нарисованные на холсте. Одной из возможностей было бы хранить информацию о фигуре в const или массиве(со всеми фигурами) и считывать данные фигуры, созданной пользователем.

Предлагаемые шаги :

• получите свои стандартные координаты формы
• получите координаты точек, выполненных пользователем
• вычислите ограничивающую рамку фигуры (в основном мин/макс по x/y).
• нарисуйте фигуру и залейте ее цветом (на скрытом холсте)
• установите для параметра globalCompositeOperation контекста значение xor и нарисуйте то, что было бы стандартной фигурой на этом холсте.

 <canvas id="visibleCanvas" width="630" height="500"></canvas>
<canvas id="hiddenCanvas" width="630" height="500" style="display:none;"></canvas>
//later in code
hiddenContext.globalCompositeOperation = 'xor'; 

это должно создать аналогичный результат:

 ctx.getImageData(sx, sy, sw, sh); 

холста и подсчитайте пиксели.

• вычислите число из ненулевых пикселей. Вообще говоря, чем больше пустых пикселей, тем лучше оценка

Вот совершенное искусство о глобальных композитных операциях на холсте https://techglimpse.com/canvas-types-source-destination-operations/