* html의 <body>
태그에 onLoad="init();"을 넣어 페이지
시작 시 자바스크립트의 init() 함수가 실행되게 함.
* HTML5의 캔버스는 태그로 아래처럼 넣어 사용.
<canvas id="canvas" width="400" height="300">
This Browser can't support canvas element.
</canvas>
* 슬라이드는 <input> 태그에 type="range"로
속성을 정해주면 만들어진다. 변화속성인 onChange에 자바스크립트의 changeScale 함수를
연결해 슬라이드의 값으로 호출한다.
<input id="slide" type="range" min="0"
max="150" value="150"
onChange="changeScale(this.value)" step="10">
현재 110%일 경우에만 표시되는 숫자가 소수점 아래로 잔뜩 표시되는 버그가 있다.
일부 브라우저에서는 슬라이드 대신 텍스트 필드로 표시된다.
내 브라우저들로 테스트해 본 결과 크롬이나 쿨노보의 경우 슬라이드 형태로, 파이어폭스의 경우 텍스트
필드 형태로 표시된다.
HTC 안드로이드폰으로 보면 슬라이드가 표시되지 않는다.
캔버스에 글씨 표현하기:
fillText("표시할 내용", x좌표, y좌표);
변수 등을 표현하고 싶을 때는 문자열 뒤에 + 변수명 형태로 넣으면 된다.
ex) ctx.fillText("size: " + factorValue*100 +
"%", 5,25);
캔버스에 그림 그리기:
ex)
ctx.fillStyle="#336699";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(120,0);
ctx.lineTo(120,133);
ctx.lineTo(0,133);
ctx.closePath();
ctx.fill(); |
* 작년에 따라 했던 지닌 마이어의 '한 번에 배우는 HTML5+JavaScript(Essential
Guide to HTML5: Using Games to Learn HTML5 and JavaScript)'
책의 후속편인 '프로젝트로 배우는 HTML5 + 자바스크립트(HTML5 and JavaScript Projects)'를
빌려와 다시 예제 따라 하기 중.
그나저나 이 책 번역자는 저번 책과 마찬가지로 여전히 최소값, 최대값, 기대값 등을 모두 최솟값, 최댓값,
기댓값 등으로 시옷을 꼭 넣어 번역하여 신경이 쓰였었는데 찾아보니 저렇게 시옷을 넣어 쓰는 게 맞춤법,
표기법에 맞는 거란다. 이 맞춤법은 아주 짜증이 난다. --; 아니 그럼 '표기법'은 왜 '표깃법'이라고,
'소수점'은 '소숫점'이라고 하지 않는 거람. 몇 년 전부터 교과서의 내용도 이 맞춤법에 맞춰 최솟값,
최댓값 등으로 쓰기 시작했다고 하니 미래에 '습니다', '읍니다'처럼 세대 차의 표시 중 하나로 작용할
듯 보인다. |