의견 : 나는 모든 사람들이 이미 HTML5라는 단어로 잘 알려져 있다고 생각하며 그 기능은 매우 강력합니다. 이 기사에서는 이동할 수있는 작은 탱크를 구현하도록 소개합니다. 세부 사항은 다음과 같습니다. HTML을 좋아하는 친구는 그것을 참조 할 수 있습니다.
<! doctype html>
<html>
<헤드>
</head>
<body onkeydown = "changeirect ()">
<canvas> 브라우저는 캔버스 태그 </canvas>를 지원하지 않습니다
<script type = "text/javaScript">
var canvas1 = document.getElementById ( 'tankmap');
var ctx = canvas1.getContext ( '2d');
var myx = 30;
var myy = 30;
기능 드로우 볼 () {
ctx.shadowblur = 30, ctx.shadowcolor = "#008c46";
ctx.fillstyle = '#008c46';
ctx.fillRect (myx, myy, 5,30);
ctx.fillRect (myx+17, myy, 5,30);
ctx.fillRect (myx+6, myy+5,10,20);
ctx.beginpath ();
ctx.fillstyle = '#004020';
ctx.arc (myx+11, myy+15,5,0, math.pi*1.5);
ctx.closepath ();
ctx.fill ();
ctx.strokstyle = "#008c46";
ctx.moveto (myx+11, myy+15);
ctx.lineto (myx+11, myy-5);
ctx.stroke ();
}
드로우 볼 ();
함수 changeirect () {
var code = event.keyCode;
스위치 (코드) {
사례 87 :
Myy--;
부서지다;
사례 68 :
myx ++;
부서지다;
사례 83 :
myy ++;
부서지다;
사례 65 :
myx-;
부서지다;
}
ctx.clearrect (0,0,500,300);
// 리 페인트
드로우 볼 ();
}
</스크립트>
</body>
</html>