CANVAS 3.1 선그리기, 사각형 그리기

2018. 2. 9. 18:08

CANVAS 3.1 선그리기, 사각형 그리기

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>캔버스01</title>
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="1140" height="1140">canvas를 지원하지 않습니다. - 
                     지원하지 않는 브라우저에서 문구가 보입니다.</canvas>
    <script>
        var canvas = $("#myCanvas").get(0);
        var ctx = canvas.getContext("2d");
        ctx.beginPath();                // 선그리기 시작
        ctx.moveTo(100,50);             // 시작점으로 이동 (사각형 왼쪽 위 모서리)
        ctx.lineTo(300,50);             // 선 위치 이동 (사각형 오른쪽 위 모서리)
        ctx.lineTo(300,200);            // 선 위치 이동 (사각형 오른쪽 아래 모서리)
        ctx.lineTo(100,200);            // 선 위치 이동 (사각형 왼쪽 아래 모서리)
        ctx.lineTo(100,50);             // 선 위치 이동 (사각형 왼쪽 위 모서리)
        ctx.lineWidth = 30;             // 선 두께
        ctx.strokeStyle = "#f10574";    // 선 색상
        ctx.lineCap = "butt";           // 라운드 끝부분 처리 - 기본값 ( 익스에서만 보여짐 )
        ctx.lineJoin = "miter";         // 선의 꺾인 부분 처리 - 기본값 ( 익스, 크롬 보여짐 )
        // ctx.setLineDash([20, 10, 50, 10]);  // 점선 만들기 ([선의넓이, 선의간격, 선의넓이, 선의간격]);
                                            // 익스 지원하지 않음, 이속성을 사용하면 캔버스 전부 안보임
        ctx.stroke();
        ctx.fillStyle = "#ffd1ec";
        ctx.fill();


        ctx.beginPath();
        ctx.moveTo(400,50);
        ctx.lineTo(700,50);
        ctx.lineTo(700,200);
        ctx.lineTo(400,200);
        ctx.lineTo(400,50);
        ctx.lineWidth = 40;
        ctx.strokeStyle = "#211926";
        ctx.lineCap = "round";          // 라운드 끝부분 처리 - 둥글게, 선 두께를 반지름으로
        ctx.lineJoin = "round";         // 선의 꺾인 부분 처리 - 둥글게
        ctx.stroke();
        ctx.fillStyle = "#eaeaea";
        ctx.fill();


        ctx.beginPath();
        ctx.moveTo(800,50);
        ctx.lineTo(1000,50);
        ctx.lineTo(1000,200);
        ctx.lineTo(800,200);
        ctx.lineTo(800,50);
        ctx.lineWidth = 35;
        ctx.strokeStyle = "#8a0dd2";
        ctx.lineCap = "square";         // 라운드 끝부분 처리 - 사각형, 선 두께만큼 길어짐
        ctx.lineJoin = "bevel";         // 선의 꺾인 부분 처리 - 잘려나간 모서리
        ctx.stroke();
        ctx.fillStyle = "#42105f";
        ctx.fill();
    </script>
</body>
</html>

결과 화면

(크롬)