HTML5 - Инсульт формы холста

Question

Я создал 2 фигуры, круг и прямоугольник, одна поверх другой, чтобы они напоминали замок с ключом. Затем я пытаюсь нанести удар, но он поглаживает обе фигуры. То, что я хочу сделать, это просто обвести объединенный шаблон, а не любое из пересечений.

context.beginPath();
context.fillStyle = "#ccc";
context.arc(115, 550, 12, 0, 2 * Math.PI, false);
context.moveTo(105, 555);
context.fillStyle = "#999";
context.rect(105, 555, 20, 30);
context.fill();
context.stroke();
context.closePath();

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

Answer 1

Работая над собственным ответом неправильной формы, я обнаружил лабораторный проект профессора Облака, который решил мою проблему.

Эта страница, SVG-to-Canvas , анализирует SVG-изображение и код Canvas. Так что если у вас есть приложение, например Illustrator, с помощью которого вы можете рисовать и сохранять графику в формате SVG, то вы можете проанализировать используемые коды холста и просто подключить их.

Answer 2

Вы можете использовать композитинг и временную канву. Примерно так:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var tempCanvas = document.getElementById('tempCanvas');
var tempContext = tempCanvas.getContext('2d');
tempContext.save();
// clear temp context
tempContext.clearRect(0, 0, canvas.width, canvas.height);

// draw all rects with strokes
tempContext.beginPath();
tempContext.strokeStyle='red';
tempContext.lineWidth=3;
tempContext.arc(100, 100, 60, 0, 2 * Math.PI, false);
tempContext.rect(20,150,100,200); 
tempContext.stroke();

// set compositing to erase existing drawings 
// where the new drawings are drawn

tempContext.globalCompositeOperation='destination-out';

// fill all rects
// This "erases" all but the outline stroke
tempContext.beginPath();
tempContext.fillStyle='blue';
tempContext.arc(100, 100, 60, 0, 2 * Math.PI, false);
tempContext.rect(20,150,100,200);
tempContext.fill();


// draw outlines from tempcanvas into canvas
ctx.drawImage(tempCanvas, 0, 0);

// draw into canvas
ctx.beginPath();
ctx.fillStyle='green';
ctx.globalAlpha = 0.2;
ctx.rect(20,150,100,200);
ctx.arc(100, 100, 60, 0, 2 * Math.PI, false);
ctx.fill();

tempContext.restore();

И jsfiddle: https://jsfiddle.net/EvaF/8to68dtd/2/

Answer 3

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

Вместо этого вы должны нарисовать только часть круга и только часть прямоугольника. Это должно сделать это для вас:

context.beginPath();
context.fillStyle = "#ccc";
context.arc(115, 550, 12, 2.5, 2.2 * Math.PI, false);
context.moveTo(105+20, 555);
context.fillStyle = "#999";
// instead of a rect, we really want three lines
context.lineTo(105+20,555+30);
context.lineTo(105,555+30);
context.lineTo(105,555);

context.fill();
context.stroke();
context.closePath();