HTML5 기본 Canvas에 대한 자세한 설명

Canvas란 무엇인가요?

새로운 HTML 표준 HTML5에서 Canvas 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다. 이 요소 태그의 장점은 HTML에서 그래픽 작업을 직접 수행할 수 있다는 점이며 이는 응용 가치가 뛰어납니다.

캔버스는 모든 픽셀을 제어할 수 있는 직사각형 영역입니다.

캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하여 풍부한 그래픽 참조를 만드는 다양한 방법이 있습니다.

코드를 살펴보겠습니다

<article>
<header>
<meta charset="utf-8">
</header>
    <canvas id="canvas" width="150" height="150"></canvas> 
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(0,0,200)";
    ctx.fillRect(10, 10, 50, 50);
    </script> 
</article>

자바스크립트로 직사각형 그리기

예제를 다시 보고 원을 그려봅시다

<article>
<header>
<meta charset="utf-8">
</header>
    <canvas id="myCanvas" width="200" height="100"></canvas> 
    <script>
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="#FF0000";
        cxt.beginPath();
        cxt.arc(70,18,15,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
    </script> 
</article>