11. HTML5 캔버스 그래픽 이론문제 정답

1. 2번( <canvas>)

 

2. 3번 (3d 그래픽도 지원한다, webgl을 이용해 3d 그래픽을 수행할 수 있다.)

 

3.

    <canvas id="can" width="300" height="300"></canvas>
    <script>
        let canvas = document.getElementById("can");
        let context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(10,10);
        context.lineTo(50,50);
        context.stroke();

 

4. 4번 (stroke 사용 이후에도 경로는 삭제되지 않으므로, beginPath()를 다시 사용해 삭제해야한다.)

 

5. rect()는 경로에 넣어 사용하지만, strokeRect() 경로에 삽입하지 않고 캔버스에 바로 그릴 수 있다.

 

6. 2번 (context.clearRect(0,0,canvas.width, canvas.height);

 

7. 이미지가 로딩되어야 그릴 수 있으므로, img.onload를 이용해 함수를 작성 하고 이미지 로딩을 시작해야한다.

 let img = new Image();
        img.onload = function (){
            context.drawImage(img,10,10);
        }
        img.src = "lion.png";

 

8. 이미지로딩을 지시하기전, img.onload 리스너에 이미지가 로딩되었을 때 이미지를 그리는 자바스크립트 코드를 작성해둬야한다.

 let img = new Image();
        img.onload = function (){
            context.drawImage(img,10,10);
        }
        img.src = "lion.png";