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로 구성되는데, 포스팅한 글들이 한 페이지에 다 보이게 되면 각 페이지의 스크립트들이 동시에 같은 공간에 놓이게 된다. 중복되는 아이디나 메서드가 있게 되면, 마지막에 설정되는 것이 적용된다. 그렇게 되면 위쪽에 있는 글에서 아랫쪽 글에서 구현한 것이 실행되는 것을 볼 수 있을것이다.(아예 실행이 되지 않는 경우도 있다.)
블로그를 한페이지씩만 보이게 꾸민다면 이렇게 할 필요는 없다.
'web' 카테고리의 다른 글
| HTML5 마우스 다운 이벤트 - 사각형 영역 체크 (0) | 2014.05.10 |
|---|---|
| HTML5 원 그리기 (0) | 2014.05.09 |
| HTML5 사각형 그리기 (0) | 2014.05.09 |
| HTML5 곡선 그리기 (0) | 2014.05.02 |
| HTML5 지원 브라우저 확인 (0) | 2013.07.26 |