예제 11-1. <canvas> 태그로 캔버스 만들기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 3. 10:40 |11. HTML5 캔버스 그래픽
1. HTML5와 캔버스
* 웹 페이지 그래픽의 전통적인 방법
1. 사진이나 그림 <img> 태그 이용
2. 그래픽은 자바 애플릿이나 플래시 등 플러그인 사용
-> 문제점이 많다.
* 캔버스 도입
- 플러그인의 도움 없이 자바스크립트 코드로 웹 페이지에서 자유롭게 그래픽을 수행할 수 있는 캔버스 기능을 도입.
- 캔버스 기능은 새로 도입된 <canvas> 태그로 브라우저 화면상에 할당된 공간에서 이루어진다.
- 캔버스의 그래픽 그리기는 자바스크립트 코드로만 가능하다.
* <canvas> 태그
1 2 3 4 5 6 | <canvas id="캔버스 객체 id" style="CSS3 스타일 시트" width="캔버스 영역의 너비" height="캔버스 영역의 높이"> 이 태그를 지원하지 않는 브라우저가 출력할 HTML 텍스트 </canvas> | cs |
- 브라우저는 <canvas> 태그가 만들어진 영역에 사각형의 빈 캔버스 공간을 할당하며, 하나의 웹 페이지에 여러 개의 캔버스를 만들 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>캔버스 만들기</title></head> <body> <h3>3 개의 캔버스 만들기</h3> <hr> <canvas id="canvas1" width="150" height="100" style="background-color:lightblue"></canvas> <canvas id="canvas2" width="150" height="100" style="background-color:violet"></canvas><br> <canvas id="canvas3" width="300" height="150" style="background-color:yellow"></canvas> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 11-3. 선으로 삼각형 그리기 (0) | 2017.11.03 |
|---|---|
| 예제 11-2. 캔버스 그리기 맛보기 (0) | 2017.11.03 |
| 예제 10-12. history 객체 활용 (0) | 2017.11.03 |
| 예제 10-11. 스크린 장치ㅔ 관한 정보 출력 (0) | 2017.11.03 |
| 예제 10-10. navigator 객체로 브라우저의 정보 출력 (0) | 2017.11.03 |