Kommentar: Ich glaube, jeder ist bereits für das Wort html5 bekannt geworden, und seine Funktionen sind sehr mächtig. In diesem Artikel werden Sie in die Implementierung eines kleinen Tanks vorgestellt, der durch ihn bewegt werden kann. Die Details sind wie folgt. Freunde, die HTML mögen, können sich darauf verweisen.
<! DocType html>
<html>
<kopf>
</head>
<Body Onkeydown = "wechseln Sie ()">
<Canvas> Ihr Browser unterstützt das Canvas -Tag </canvas> nicht
<script type = "text/javaScript">
var canvas1 = document.getElementById ('Tankmap');
var ctx = canvas1.getContext ('2d');
var myx = 30;
var myy = 30;
Funktion Drawball () {
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 ();
}
Drawball ();
function veränderung () {
var code = event.keycode;
Switch (Code) {
Fall 87:
myy--;
brechen;
Fall 68:
myx ++;
brechen;
Fall 83:
myy ++;
brechen;
Fall 65:
myx--;
brechen;
}
ctx.clearRect (0,0,500.300);
// neu streichen
Drawball ();
}
</script>
</body>
</html>