web

HTML5 삼각형 그리기

zimamdero 2014. 5. 9. 23:32



function drawTriangle() {
     var canvas = document.getElementById("drawTCanvas");
     var context = canvas.getContext("2d");
     var left = (canvas.width - 200) * 0.5;
     var top = canvas.height * 0.1;
     var size = 200;
     context.beginPath();
     context.fillStyle = "green";     
     context.moveTo(left + size * 0.5, top + size * 0.2);
     context.lineTo(left + size * 0.8, top + size * 0.8);
     context.lineTo(left + size * 0.2, top + size * 0.8);
     context.closePath();
     context.fill();                 
   }

 

drawTriangle() 메서드는 <head>에서 정의하고 <body>에서 바로 실행

 

* 이전 포스팅의 캔버스아이디와 현재 포스팅의 캔버스아이디가 다르다.(앞으로도 계속 다르게 할 것이다.) 그 이유는 블로그에 올리기 때문이다.

 

블로그도 html로 구성되는데, 포스팅한 글들이 한 페이지에 다 보이게 되면 각 페이지의 스크립트들이 동시에 같은 공간에 놓이게 된다. 중복되는 아이디나 메서드가 있게 되면, 마지막에 설정되는 것이 적용된다. 그렇게 되면 위쪽에 있는 글에서 아랫쪽 글에서 구현한 것이 실행되는 것을 볼 수 있을것이다.(아예 실행이 되지 않는 경우도 있다.)

 

블로그를 한페이지씩만 보이게 꾸민다면 이렇게 할 필요는 없다.