복잡한 모양 B 부분.

나는 이전 게시물에 빠른 보충을 추가하고 싶다. 나는 게시물에서 다음과 같이 일련의 세그먼트에서 모양을 만드는 것에 대해 토론했다.

ctx.lineWidth = 3; // just making it a little more visible
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(100,100);
ctx.lineTo(20,200);
ctx.lineTo(100,200);
ctx.lineTo(200, 20);
ctx.lineTo(200, 200);
ctx.stroke();

나는 2차원 그룹으로 쓸 수 있는 방법이 있다는 것을 잊어버렸기 때문에 너는 이렇게 많이 반복할 필요가 없다.

// set your points in a 2d array
const shape = [
    [20,20],
    [20,100],
    [100, 100],
    [20, 200],
    [100, 200],
    [200, 20],
    [200, 200]
];

ctx.lineWidth = 3;
ctx.beginPath();

// loop through each set of points
// if it's the first set (at index 0), `moveTo` that point,
// otherwise use `lineTo`
shape.forEach((p, i) => { 
  i === 0 ? ctx.moveTo(p[0], p[1]) : ctx.lineTo(p[0], p[1])
})

ctx.stroke();