تعليق: أعتقد أن كل شخص أصبح معروفًا بالفعل بكلمة HTML5 ، ووظائفها قوية للغاية. يقدم لك هذه المقالة تنفيذ خزان صغير يمكن نقله من خلاله. التفاصيل كما يلي. يمكن للأصدقاء الذين يحبون HTML الرجوع إليها.
<! doctype html>
<html>
<head>
</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 ؛
وظيفة 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 () ؛
وظيفة تم تغييرها () {
var code = event.keycode ؛
التبديل (رمز) {
الحالة 87:
ميري-؛
استراحة؛
الحالة 68:
myx ++ ؛
استراحة؛
الحالة 83:
myy ++ ؛
استراحة؛
الحالة 65:
Myx-- ؛
استراحة؛
}
CTX.ClearRect (0،0،500،300) ؛
// إعادة الطلاء
Drawball () ؛
}
</script>
</body>
</html>