1. HTML5

2. 차례 캔버스(Canvas)란? 캔버스의 기초 사각형 선 이미지 단위

3. 캔버스(Canvas)란? 캔버스는(canvas)는 2차원그래프, 게임, 그래픽 외의 시각적인 이미지를 동적으로 구현할 수 있는 자바스크립트 API로 메소드와 속성으로 구현됩니다.

4. 캔버스(Canvas)기초 <!DOCTYPE HTML>< html lang="ko">< head><meta charset="UTF-8"><title>HTML 5 Canvas 예제</title>< /head>< body><canvas id="Canvas" width="200" hegiht="300"></canvas><script type="text/javascript">var canvas=document.getElementById('Canvas');varcvas=canvas.getContext('2d');cvas.fillStyle='#FF0000‘;cvas.fillRect(10,10,80,100);</script>< /body>< /html>

5. 캔버스(Canvas)기초 결과 cvas.fillStyle="rgba(255,0,0,0.3)"; cvas.fillStyle="rgb(255,0,0)";

6. 사각형 <canvas id="Canvas" width="300" height="200"></canvas><script type="text/javascript“> var canvas=document.getElementById('Canvas');varcvas=canvas.getContext('2d');cvas.fillStyle='#FF0000';cvas.fillRect(10,10,150,180);cvas.clearRect(20,20,70,90);cvas.strokeRect(30,30,200,100);</script>

7. 선 var element, context; function line(){ context = element.getContext('2d'); context.beginPath(); context.moveTo(10, 10); context.lineTo(10, 80); context.lineTo(80, 80); } //선 긋기 function draw(){ element = document.getElementById('idOne'); if (element.getContext){ line(); context.stroke(); } }

8. 선 //삼각형 function triangle(){ element = document.getElementById('idTwo'); if (element.getContext){ line(); context.closePath(); context.stroke(); } } //함수 실행 draw(); triangle();

9. 이미지 function drawCanvas() {var canvas=document.getElementById('Canvas');varcvas=canvas.getContext('2d');var ballet = new Image();ballet.src='IMG_4687.jpg';cvas.drawImage(ballet, 10, 10);};

10. 선 cvas.beginPath();cvas.strokeStyle='#FF0000';cvas.moveTo(60,313);cvas.lineTo(120,166);cvas.lineTo(180,76);cvas.lineTo(240,250);cvas.lineTo(300,70);cvas.lineTo(360,200);cvas.lineTo(420,120);cvas.lineTo(480,70);cvas.stroke();}; function drawCanvas() {var canvas=document.getElementById(‘Canvas');varcvas=canvas.getContext('2d');var ballet = new Image();ballet.src='canvas_back.png;cvas.drawImage(ballet, 10, 10);

11. 단위 인치당 = 72pixel X mm * 2.8346 = Y pixel A4 A4 270 mm 842pixel 210 mm 595pixel

12. 공부중……..

13. 50 * 50

14. 감사합니다.