내장 콘텐츠 - CANVAS

Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링 한다.

 

<canvas id="tutorial" width="150" height="150"></canvas>

이 영역에 그림을 그린다는 뜻이다. 자바스크립트로 그림을 그려야하며, html이나 css로 그리는것이 아니다!

 

 

 

예제

<canvas id = "canvas" width = "200" height = "150"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d'); //우리가 찾은 context에서 2d 그림을 그릴 것이다.
        ctx.fillStyle = 'rgb(200,0,0)';
        ctx.fillRect(10, 10, 50, 50);
        ctx.fillStyle = 'rgb(0,0,200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
    </script>

 

canvas 영역

 

이와같이 이용하면, 에니메이션 활용도 가능하며, 외부의 이미지를 가져와서 여기서 그려서 밖으로 내보내기도 가능하고 그 외의 많은 활동도 가능하다. (자바스크립트를 이용할때 사용해보자)