HTML5实现一个能够移动的小坦克示例代码


Posted in HTML / CSS onSeptember 02, 2013

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
</head>
<body onkeydown="changeDirect()">
<canvas id="tankMap" width="500px" height="300px" style="border:1px solid #d3d3d3;">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas1=document.getElementById('tankMap');
var ctx=canvas1.getContext('2d');
var myX=30;
var myY=30;
function 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 changeDirect(){
var code=event.keyCode;
switch(code){
case 87:
myY--;
break;
case 68:
myX++;
break;
case 83:
myY++;
break;
case 65:
myX--;
break;
}
ctx.clearRect(0,0,500,300);
//重新绘制
drawBall();
}
</script>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 #HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 #HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 #HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 #HTML / CSS
You might like
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
php session 写入数据库
2016/02/13 PHP
php输出形式实例整理
2020/05/05 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python中将字典形式的数据循环插入Excel
2018/01/16 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
会计助理岗位职责
2014/02/17 职场文书
学雷锋演讲稿
2014/03/04 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
学习雷锋主题班会
2015/08/14 职场文书
初中生物教学反思
2016/02/20 职场文书