Нарисуйте несколько фигур как один

Question

Я работаю над приложением javascript, где я рисую карту, используя полигоны на холсте html, эти многоугольники имеют разные цвета и тени в зависимости от того, что они представляют. Например, леса представлены зеленым цветом заливки с большой тенью, конечно, не все леса связаны друг с другом, но иногда очень близки к другим лесным многоугольникам.

Проблема в том, что в некоторых случаях тень одного леса тянется поверх другого леса, что убивает весь эффект.

Есть ли способ заполнить все эти (например) лесные полигоны сразу, чтобы убедиться, что тень (и другой стиль) верна? Или что может быть другим решением для решения этой проблемы?

Текущая ситуация:

Answer 1

Похоже, я нашел очень простой способ достижения своей цели,

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

Пример:

 c2.beginPath(); 

     //Create polygon 1 
     c2.moveTo(8,8); //Move "cursor" to starting position 
     c2.lineTo(8,16); 
     c2.lineTo(16,16); 
     c2.lineTo(16,8); 
     c2.lineTo(8,8); //End the polygon at the starting position 

     //Create polygon 2 
     c2.moveTo(32,8); 
     c2.lineTo(32,16); 
     c2.lineTo(48,16); 
     c2.lineTo(48,8); 
     c2.lineTo(32,8); 

     c2.closePath(); 

     //Fill both polygons 
     c2.fill(); 

Answer 2

Вы можете попробовать использовать глобальные составные операции. Если вы используете source-out как составную операцию, перекрывающиеся области ваших лесов не должны быть нарисованы. Я не уверен, что это также работает с тенями, хотя ...

См. https://developer.mozilla.org/de/docs/Web/API/Canvas_API/Tutorial/Compositing для получения более подробной информации.

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

draw stuff 
renderingContext.save() 
    set composite operation 
    draw forests 
renderingContext.restore() 
go on with drawing