1 / 14

HTML5

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

pepper
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 감사합니다.

More Related