HTML GRAPHICS 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 11
HTML Graphics Google Maps SVG (Scalable Vector Graphics) Canvas: 자바스크립트를 이용한 그래픽
캔버스(canvas) 캔버스는 <canvas> 요소로 생성 캔버스는 HTML 페이지 상에서 사각형태의 영역 실제 그림은 자바스크립트를 통하여 코드로 그려야 한다.
canvas 요소 생성 – canvas.html <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> </body> </html>
canvas 좌표 (0,0) (200,0) (0,100) (200,100)
canvas에 그림 그리는 순서 javascript로 작성한다. canvas 요소 찾기 context 객체 생성 var canvas = document.getElementById(“myCanvas”) var ctx = canvas.getContext(“2d”); ctx.fillStyle = “#FF0000”; // 색상 정하기 ctx.fillRect(0,0,150,75); // 직사각형 그리기
선 그리기 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html>
원 그리기 <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>
직사각형 그리기 <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.rect(20, 20, 150, 100); ctx.stroke(); </script>
canvas로 구성하는 animation
canvas로 구현한 시계
SVG <!DOCTYPE html> <html> <body> <svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> </body> </html>
회전하는 타원 – ellipse.html <!DOCTYPE html> <html> <body> <p><strong>Note:</strong> This example does not work in Internet Explorer and Safari.</p> <svg width="100%" height="300px"> <g id="R1" transform="translate(250 250)"> <ellipse rx="100" ry="0" opacity=".3"> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" /> <animate attributeName="cx" dur="8s" values="-20; 220; -20" repeatCount="indefinite" /> <animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite" /> </ellipse> </g> <use xlink:href="#R1" transform="rotate(72 390 150)" /> <use xlink:href="#R1" transform="rotate(144 390 150)" /> <use xlink:href="#R1" transform="rotate(216 390 150)" /> <use xlink:href="#R1" transform="rotate(288 390 150)" /> </svg> </body> </html>