<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body onkeydown="test()">

    <h1>小球上下移动</h1>

    <canvas id="test" width="400px" height="300px" style="background-color: black"></canvas>

    <script type="text/javascript">

        //得到画布

        var canvas1 = document.getElementById("test");

        //取得画布画笔对象

        var cxt = canvas1.getContext("2d");

        //画出红色圆球

        cxt.beginPath();

        cxt.fillStyle = "#FF0000";

        cxt.arc(, , , , , true);

        cxt.closePath();

        cxt.fill();

        //键盘发生事件 让小球移动 w d s a

        //按下一个键，实际上触发一个onkeydow事件

        var ballX = ;

        var bally = ;

        function test() {

            cxt.clearRect(,,,);

            var code = event.keyCode;

            switch (code) {

                case :

                    bally--;

                    break;

                case :

                    ballX++;

                    break;

                case :

                    bally++;

                    break;

                case :

                    ballX--;

                    break;

            }

            drawBall();

        }

        //重新绘制

        function drawBall() {

            cxt.beginPath();

            cxt.fillStyle = "#FF0000";

            cxt.arc(ballX, bally, , , , true);

            cxt.closePath();

            cxt.fill();

        }

    </script>

</body>

</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. PO_从PO追溯PR的方式和表（分析）

    2014-06-03 Created By BaoXinjian

  2. 解决windows server2012 评估版本过期，系统会自动关机

    解决windows server2012 评估版本过期,系统在1小时后会自动关机. 重置方法:以管理员方式运行命令行,执行slmgr.vbs /rearm,可以使授权延长180天,但是仅能延长5次.

  3. mysql工作中常见问题

    1.Error Code: 1044 - Access denied for user 'root'@'localhost' to database 'information_schema'Query ...

  4. Android利用Fiddler进行网络数据抓包【怎么跟踪微信请求】

    主要介绍Android及IPhone手机上如何利用Fiddler进行网络数据抓包,比如我们想抓某个应用(微博.微信.墨迹天气)的网络通信请求就可以利用这个方法. Mac 下请使用 Charles 代替 ...

  5. Spark1.4.1 编译与安装

    1.下载下载地址:http://spark.apache.org/downloads.html 选择下载源码 2.源码编译1)解压tar -zxvf spark-1.4.1.tgz2.编译spark有 ...

  6. silverlight打开和保存文件

    因为Silverlight是运行在浏览器中的客户端,所以对于程序的操作权限要求比较严格,以本篇的主题来说,一个表现就是不能够随意的进行文件打开和保存操作,如果在代码中直接使用Stream来操作文件,会 ...

  7. Servlet和Android网络交互基础（3）

    在上一章中採用了最简单的创建service端代码方式,但在实际开发中一般都会採用比較成熟的框架.以下是完整的maven+spring mvc 创建service的方式 下载安装Eclipse 和jdk ...

  8. mac重装系统

    通过 macOS 恢复功能启动macOS 恢复功能会根据您在电脑启动时按下的组合键来安装不同版本的 macOS.在按电源按钮打开 Mac 后,立即按住以下组合键之一.然后在看到 Apple 标志或旋转 ...

  9. php教程之php空白页的原因及解决方法

    php中出现空白页的原因及解决方法汇总. 很多程序员在进行php开发的时候都遇到过出现空白页的请,综合分析来说,在php编程中出现空白页面可能是由以下几个原因造成的: 1.逻辑错误逻辑错误是最难排除的 ...

  10. XILINX XST综合的选项的含义

    所谓综合,就是将HDL语言.原理图等设计输入翻译成由与.或.非门和RAM.触发器等基本逻辑单元的逻辑连接(网表),并根据目标和要求(约束条件)优化所生成的逻辑连接,生成EDF文件.完成了输入.仿真以及 ...