Как объединить фигуры на canvas?

445

26 января 2017, 04:23

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

Как это можно сделать на canvas? Есть ли какой простой механизм, так как такие преобразования должны проходить часто? Возможно как-то получить площадь?

ЗЫ

Посоветуйте, что почитать про canvas, нахожу только основы.

Answer 1

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 
 
ctx.fillStyle = 'lime'; 
ctx.fillRect(20, 20, 80, 80); 
 
var can2 = document.getElementById('canvas2'); 
var ctx2 = can2.getContext('2d'); 
 
ctx2.beginPath(); 
ctx2.fillStyle = "green"; 
ctx2.arc(100, 60, 40, 0, Math.PI * 2, 1); 
ctx2.fill(); 
 
var can3 = document.getElementById('canvas3'); 
var ctx3 = can3.getContext('2d'); 
 
ctx3.drawImage(can, 0, 0); 
ctx3.drawImage(can2, 0, 0);

<canvas id="canvas1" width="200" height="200" style="border: 1px solid black"></canvas> 
<canvas id="canvas2" width="200" height="200" style="border: 1px solid black"></canvas> 
<canvas id="canvas3" width="200" height="200" style="border: 1px solid black"></canvas>