Маскировка фигур в холсте HTML5?

Извините, если это было задано в другом месте, но это довольно сложно назвать фразой, так как я ничего не мог найти.

Есть ли способ реализовать маски в холсте?

Например, только с использованием фигур (без изображений) Я рисую дом с окном. У меня также есть форма, представляющая человека. Я хочу, чтобы этот человек появился в окне - но, очевидно, только то, что позволяет окно, должно быть видимым для человека. Остальное будет замаскировано.

Я думал о том, чтобы опорожнить часть дома, занятого окном, чтобы в слое была подлинная дыра, что затрудняет задачу.

Но я сознаю, что вы не можете удалять фигуры или части фигур в холсте, а только рисовать новые вещи поверх старых вещей. Итак, в многослойной среде (я делаю игру в Kinetic.JS), что именно я могу сделать?

Извините, если что-то из этого плохо объяснено - новое для всей графической вещи.

Ответ 1

В скором времени вы должны узнать об обрезке и компоновке, но ни то, что вам на самом деле здесь не нужно.

Вместо этого вам нужно узнать, как создавать пути, используя правило отличное от нуля число обмотки, что и использует холст HTML5.

Если вы нарисуете часть своего пути по часовой стрелке и другую часть против часовой стрелки, вы можете "вырезать" фигуры с вашего пути.

Вот пример с окном:

http://jsfiddle.net/simonsarris/U5bXf/

edit: Вот немного визуализации для вас, как работает правило с ненулевым числом обмотки:

Подпапки рисуются в направлении, и там, где пересекаются пути, вы получите заполненные (или не) пробелы.

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

Ответ 2

Вам просто нужно создать обтравочный контур и нарисовать фигуру там. Mozilla Developer Network - отличное место для обучения холсту. Здесь раздел clipping.

Я создал базовый fiddle с примером того, что, как я думаю, вы пытаетесь создать.

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);

// create a clipping path
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 130);
ctx.lineTo(130, 130);
ctx.lineTo(130, 20);
ctx.clip();

// backgroud in clipped area
ctx.fillStyle = "#11c";
ctx.fillRect(0, 0, 150, 150);

// draw shapes inside clipped area
ctx.translate(75, 90);

ctx.fillStyle = '#f00';

ctx.fillRect(-15, -40, 40, 40);
ctx.fillRect(0, 0, 10, 10);
ctx.fillRect(-25, 10, 60, 60);

Надеюсь, это поможет, удачи в вашем проекте!