1.HTML5에서 웹 페이지에 이미지, 도형 등을 그리는 그래픽 공간을 만드는 태그는?
①<div>
②<canvas>
③<graphics>
④<iframe>
2.HTML5 캔버스 기능에 대한 설명 중 틀린 것은?
①캔버스는 HTML5의 표준이다.
②하나의 웹 페이지에 여러 개의 캔버스를 그릴 수 있다.
③캔버스는 2차원 그래픽만 지원하고, 3차원은 지원하지 않는다.
캔버스 객체는 2차원이나 3차원 그래픽을 모두 지원한다. 2차원 그래픽을 수행하려면, canvas.getContext("2d")를, 3차원 그래픽을 수행하려면, canvas.getContext("3d")를 호출하면 된다.
④캔버스도 마우스 이벤트를 처리할 수 있다.
3.다음과 같은 태그가 있을 때 주석에 맞도록 빈 라인에 자바스크립트 코드를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<canvas id="can" width="300" height="300"></canvas>
<script>
var canvas=document.getElementById("can"); //캔버스의 DOM객체를 알아낸다.
var context=canvas.getContext("2d"); //그래픽 컨텍스트 객체를 알아낸다.
context.beginPath(); //경로를 새로 구성한다.
context.moveTo(10,10); //(10,10)을 시작점으로 입력한다.
context.lineTo(50,50); //(50,50)까지 직선을 만든다.
context.stroke(); //경로에 있는 직선을 컨버스에 그린다.
</script>
</body>
</html>
4.컨택스트 객체의 경로와 메소드에 대해 잘못 설명한 것은?
①beginPath()는 캔버스에 그릴 도형의 경로를 새로 시작한다.
②beginPath()는 이전에 만들어진 도형의 경로를 모두 지운다.
③직선, 원호, 사각형 등의 도형은 경로에 먼저 삽입된 후 캔버스에 한 번에 그려진다.
④stroke()는 경로에 있는 도형을 모두 캔버스에 그리고, 그린 도형은 경로에서 삭제한다.
stroke()후에도 경로는 지워지지 않고 그대로 남아 있다.
5.컨텍스트 객체에서 사각형을 그리는 rect()메소드와 strokeRect()의 차이점은 무엇인가?
rect() 메소드는 경로에 사각형을 삽입하며 실제 캔버스에 그리는 것은 아니다. 추후 stroke() 메 소드가 불려져야 그려진다. 하지만 strokeRect()은 경로에 삽입하지 않고 캔버스에 바로 사각형을 그린다.
6.캔버스 객체가 canvas이고 컨텍스트가 context일 때, 캔버스를 깨끗히 지우는 메소드는?
①context.fillText(0,0,canvas.width,canvas.height);
②context.clearRect(0,0,canvas.width,canvas.height);
③context.beginPath();
④context.closePath();
7.다음 코드는 else.png 파일의 이미지를 캔버스에 그리는 코드이다. 이 코드를 실행하면 이미지가 출력될 때도 있고, '안될 때도 있다. 이유는 무엇인가? 코드를 올바르게 수정하라.
var img = new Image();
img.src = "elsa.png";
context.drawImage(img,10,10);img.src = "elas.png"; 라인은 이미지의 로딩을 시작시키고 이미지의 로딩이 완료된 것을 확인하 지 않고 바로 리턴한다. 만일 이미지가 로딩되지 않은 채로 다음 라인 context.drawImage(img, 10, 10);이 실행되면, 이미지를 그릴 수 없게 된다. 이미지가 로딩된 것을 통보받은 시점에 이미지를 그 려야 한다. 다음과 같이 수정하여야 한다.
var img = new Image();
img.onload = function f() {
context.drawImage(img, 10, 10);
}
img.src = "elsa.png";
8.다음 코드에 어떤 문제가 있는지 설명하라.
var img = new Image();
img.src = "elsa.png";
img.onload=function f(){
context.drawImage(img,10,10);
}img.src = "elas.png"; 라인은 이미지의 로딩을 시작시키고 이미지의 로딩이 완료된 것을 확인하 지 않고 바로 리턴한다.
함수의 위치가 img.srt="elsa.png";라인의 앞에 위치해야 한다.
var img = new Image();
img.onload=function f(){
context.drawImage(img,10,10);
}
img.src = "elsa.png";'HTML+CSS+JavaScript' 카테고리의 다른 글
| [HTML5+CSS3+Javascript 웹프로그래밍]10장 실습문제 (0) | 2021.11.25 |
|---|---|
| [HTML5+CSS3+Javascript 웹프로그래밍]12장 OpenChallenge (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]10장 연습문제 (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]8장 연습문제 (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]8장 OpenChallenge (0) | 2021.11.21 |