Canvas API - 기본 도형 그리기

직사각형 그리는 3가지 방법

1. clearRect(x, y, width, height)

정의된 사각형의 모든 픽셀을 투명으로 설정하고 이전에 그린 내용을 지운다.

2. fillRect(x, y, width, height)

너비와 높이에 의해 크기가 결정되고 x, y 위치에 채워진 사각형을 그린다.

3. strokeRect(x, y, width, height)

strokeStyle 및 기타 컨텍스트 설정에 따라 윤곽선 사각형을 그린다.

텍스트를 그리는 3가지 방법

1. fillText()

2. strokeText()

3. measureText()

측정된 텍스트에 대한 정보(= 너비)를 반환한다.

let text = ctx.measureText('Poburi');
console.log(text); //=> 29.08203125

라인을 그리는 방법

1. lineWidth

2. lineCap

선의 끝점을 그리는데 사용되는 모양을 결정한다.

ctx.lineCap = "butt" || "round" || "square";

• butt: 선의 끝점 모양이 네모. (기본값)
• round: 선의 끝점 모양이 둥근.
• square: 동일한 너비와 선 두께의 절반 높이를 가진 상자를 추가해 선의 끝을 정사각형으로 만듦.

function lineCap() {
    const canvas = document.getElementById("line-cap");
    const ctx = canvas.getContext("2d");
    const lineCap = ["butt", "round", "square"];

    ctx.strokeStyle = "#09f";
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(140, 10);
    ctx.moveTo(10, 140);
    ctx.lineTo(140, 140);
    ctx.stroke();

    ctx.strokeStyle = "black";
    lineCap.forEach((line, idx) => {
        ctx.lineWidth = 15;
        ctx.lineCap = line;
        ctx.beginPath();
        ctx.moveTo(25 + idx * 50, 10);
        ctx.lineTo(25 + idx * 50, 140);
        ctx.stroke();
    });
}

3. lineJoin

두 선이 만나는 모서리 유형을 정의함.

- round: 연결된 세그먼트의 끝점 중앙에 디스크의 추가 섹터를 채워 모양의 모서리를 반올림함. 둥근 모서리의 반경은 선 넘비와 같다.

- bevel: 연결된 세그먼트의 끝점과 각 세그먼트의 개별 외부 직사각형 모서리 사이에 삼각형 영역을 채워줌.

- miter: 삼각형 영역을 마름모꼴로 채워줌. (기본값)

function lineJoin() {
    const canvas = document.getElementById("line-join");
    const ctx = canvas.getContext("2d");
    const lineJoinType = ["round", "bevel", "miter"];
    ctx.lineWidth = 10;

    lineJoinType.forEach((type, i) => {
        ctx.lineJoin = type;
        ctx.beginPath();
        ctx.moveTo(-5, 5 + i * 40);
        ctx.lineTo(35, 45 + i * 40);
        ctx.lineTo(75, 5 + i * 40);
        ctx.lineTo(115, 45 + i * 40);
        ctx.lineTo(155, 5 + i * 40);
        ctx.font = "18px serif";
        ctx.fillText(type, 160, 15 + 40 * i);
        ctx.stroke();
    });
}

4. miterLimit

miter 한계 비율을 정의함. 기본값은 10.

5. getLineDash

음수가 아닌 숫자의 짝수를 포함하는 현재 Line Dash 패턴 배열을 반환함.

6. setLineDash

현재 Line Dash 패턴을 설정함.

7. lineDashOffset

라인에서 Dash 배열을 시작할 위치를 지정함.