1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. </head>
  6. <body onkeydown="test()">
  7. <h1>小球上下移动</h1>
  8. <canvas id="test" width="400px" height="300px" style="background-color: black"></canvas>
  9. <script type="text/javascript">
  10. //得到画布
  11. var canvas1 = document.getElementById("test");
  12. //取得画布画笔对象
  13. var cxt = canvas1.getContext("2d");
  14. //画出红色圆球
  15. cxt.beginPath();
  16. cxt.fillStyle = "#FF0000";
  17. cxt.arc(, , , , , true);
  18. cxt.closePath();
  19. cxt.fill();
  20. //键盘发生事件 让小球移动 w d s a
  21. //按下一个键,实际上触发一个onkeydow事件
  22. var ballX = ;
  23. var bally = ;
  24.  
  25. function test() {
  26.  
  27. cxt.clearRect(,,,);
  28. var code = event.keyCode;
  29. switch (code) {
  30. case :
  31. bally--;
  32. break;
  33. case :
  34. ballX++;
  35. break;
  36. case :
  37. bally++;
  38. break;
  39. case :
  40. ballX--;
  41. break;
  42. }
  43. drawBall();
  44. }
  45.  
  46. //重新绘制
  47. function drawBall() {
  48. cxt.beginPath();
  49. cxt.fillStyle = "#FF0000";
  50. cxt.arc(ballX, bally, , , , true);
  51. cxt.closePath();
  52. cxt.fill();
  53. }
  54.  
  55. </script>
  56. </body>
  57. </html>

Html5 小球键盘移动的更多相关文章

  1. html5 虚拟键盘弹出挡住底部的输入框解决方案

    问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

  2. 9款让你眼前一亮的HTML5/CSS3示例及源码

    1.HTML5 3D点阵列波浪翻滚动画 今天我们要再分享一款基于HTML5 3D的点阵列波浪翻滚动画特效,同样是非常的壮观. 在线演示 源码下载 2.HTML5小球弹跳动画 很不错的3D小球 今天我要 ...

  3. 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘

    iPhone/iPad和Android提供不同的的键盘输入类型,触发合适的键盘将极大地改善用户体验.   键盘类型 默认: 默认键盘的字母模式 数字: 默认键盘的数字模式,(含小数点等) 邮件: 与默 ...

  4. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  5. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  6. HTML5 随机弹跳的小球

    查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm Chrome效果图: 火狐效果图:推荐:http://hovertree.com/texiao/css3/18/ ...

  7. html5 方框内的小球

    html5 方框内的小球 版本一 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  8. [HTML5]移动开发不同手机弹出数字键盘问题

    这里还是先那么先交代一下遇到的问题.其实无论是tel还是number都不是完美的:type="tel"优点是iOS和Android的键盘表现都差不多缺点是那些字母好多余,虽然我没有 ...

  9. 第八讲:HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

随机推荐

  1. SQL 错误 823 I/O error (bad page ID) detected during read【修复方法】

    今天一个数据库损坏了,不管对 该表 查询.修改.添加 都会出错, 错误信息如下: I/O error (bad page ID) detected during read at offset 0x00 ...

  2. ArcMap导入数据到ArcSDE报000597或者000224的错误

    这两天碰到不同用户提出的不同的问题,可是分析之后发现导致该问题的解决办法是同一个原因. -------------------------------------------------------- ...

  3. STL应用之set

    之前在解决一道算法题的时候,应用到set,特意对这个stl的容器类做了一些了解.在我的印象中,set就是一个元素不重复的集合,而事实上也正是这样的.无论从MSDN还是任何其它地方,都会告诉我们set的 ...

  4. 使用NuGet发布自己的.NET NuGet 包( .NET Standard & Windows)

    发布自己的nuget包 STEP 1:获取API Key 首先,你需要到NuGet上注册一个新的账号,然后在My Account页面,获取一个API Key,或者是自建服务器上生成一个API Key( ...

  5. nginx 内置变量大全(转)

    HTTP核心模块支持一些内置变量,变量名与apache里的对应.比如 $http_user_agent,$http_cookie等表示HTTP请求信息的变量.更多变量:$args, 请求中的参数; $ ...

  6. LaTeX多文件编译的方法总结

    LaTeX多文件编译的方法总结 在编写LaTeX文档的时候,由于文档的section较多,或者section的编写时间各不相同,我们可能碰到如下问题: 1.由于想分开编写各个section 2.pre ...

  7. 分享六:php脚本守护进程

    http://www.baidufe.com/item/9565cec0004cb49d25fd.html

  8. 在FPGA中使用for循环一定浪费资源吗?

    渐渐地,发现自己已经习惯于发现细节,喜欢打破常规,真的非常喜欢这种feel. 相信很多人在书上或者博文上都有提出“在FPGA中使用for语句是很占用资源的”的观点,特权同学也不例外.那么,这种观点正确 ...

  9. 基于epoll的简单的httpserver

    该httpserver已经能够处理并发连接,支持多个client并发訪问,每一个连接能够持续读写数据.当然.这仅仅是一个简单的学习样例.还有非常多bug,发表出来仅仅是希望大家能够互相学习.我也在不断 ...

  10. Linux系统cp: omitting directory `XXX'问题解决

    在linux系统中复制文件夹时提示如下: cp: omitting directory `foldera/' 其中foldera是我要复制的文件夹名,出现该警告的原因是因为foldera目录下还存在目 ...