어제 집에 가서 HTML5 로 이미지 찍는거를 와이프에게 보여줬더니;
헐~
하고 비웃더군요 = =)~;;;
그래서 좀 더 난이도 있는 예제를 만들어 보았습니다.
이름하여 회전하는 빗자루 입니다. ~(-_-)~ 짜잔~
지난번에는 소스를 보여주고 데모를 보여줬더니... 흥미가 없는 것 같아서 이번에는 순서를 바꾸어보았습니다.
( 크롬, 파이어 폭스로 보셔야 나옵니다~ IE8 은 아직 canvas 를 지원 안한다는군요~ )
<br /><br /><div class="tattermoreless" more=" more.. " less=" less.. ">
( 크롬, 파이어 폭스로 보셔야 나옵니다~ IE8 은 아직 canvas 를 지원 안한다는군요~ )
<br /><br /><div class="tattermoreless" more=" more.. " less=" less.. ">
<br /><!DOCTYPE HTML><br /><html><br /> <head><br /> </head><br /> <body><br /> <div><br /><canvas id="test" width="320" height="240"><br /></canvas><br /><br /><script><br />var canvas;<br />var context;<br />var testImage;<br />var testImageRot = 0;<br /><br />function main() {<br /> canvas = document.getElementById("test")<br /> if (!canvas.getContext) {<br /> document.writeln('THIS_BROWSER_DOES_NOT_SUPPORT_CANVAS');<br /> return;<br /> }<br /><br /> context = canvas.getContext("2d");<br /><br /> testImage = new Image();<br /> testImage.src = "http://imp17.com/index/icon_myevan.gif";<br /> testImageRot = 0;<br /> setInterval(onFrame, 10);<br />}<br />function onFrame() {<br /> testImageCenterX = testImage.width / 2;<br /> testImageCenterY = testImage.height / 2;<br /><br /> context.save();<br /> context.translate(testImageCenterX, testImageCenterY);<br /> context.rotate(testImageRot * Math.PI / 180);<br /> context.drawImage(testImage, -testImageCenterX, -testImageCenterY);<br /> context.restore();<br /><br /> testImageRot += 1;<br />}<br /><br />main();<br /></script><br /> </div><br /><br /> </body><br /></html><br />
(0) 
(0)
python 을 좋아하는 게임 프로그래머
