HTML5 - Canvas Shape Stroke

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

경로가 교차 부분없이 수행되게하려면 직사각형과 전체 원을 사용할 수 없습니다.

대신 원의 일부분과 직사각형의 일부분 만 그려야합니다.

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(); 

Answer 2

내 자신의 불규칙한 모양의 대답을 작업하면서 클라우드 교수가 내 문제를 해결 한 실험실 프로젝트를 발견했습니다.

이 페이지 (SVG-to-Canvas)는 SVG 그래픽을 Canvas 코드로 구문 분석합니다. 따라서 일러스트 레이터와 같은 응용 프로그램을 사용하여 SVG로 그래픽을 그리고 저장할 수 있다면 사용 가능한 캔버스 코드를 구문 분석하고 플러그 할 수 있습니다.

Answer 3

합성 캔버스와 임시 캔버스를 사용할 수 있습니다. 뭐 그런 :

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/