<html>

 <head>

  <meta charset="utf-8"/>

 </head>

 <body onkeydown="keydown()">

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

 </body>

</html>

<script>

   var arcx=30;

   var arcy=30;

   var canvas=document.getElementById("tankmap");

   canvas.width=window.screen.width;

   canvas.height=window.screen.height;

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

   drawball();

   function drawball(){

   cxt.beginPath();

   cxt.fillStyle="#BA9658"

   cxt.arc(arcx,arcy,10,0,360,true);

   cxt.closePath();

   cxt.fill();

   }

   function keydown(){

	   //alert(event.keyCode);

	   cxt.clearRect(0,0,window.screen.width,window.screen.height);

	   arcx++;

	   arcy++;

	   drawball();

   }

</script>

html5 滚动小球的更多相关文章

  1. html5滚动页面简单写法

    html5滚动页面简单写法纵向滚动比较简单 直接在外面加个高度 然后overflow-y: auto; 横向比较复杂了外面写两层 最外面一层写个宽度 overflow-x: auto;第二层 写wid ...

  2. html5碰撞小球模拟

    这里根据动量守恒和能量守恒定理来计算小球的位置,从而模拟完全弹性碰撞下的小球运行轨迹. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. HTML5滚动加载

    @using YoSoft.DSM.YoDSMModel;@using YoSoft.DSM.YoDSMBLL;@{ Layout = "~/Views/Shared/_LayoutComp ...

  4. html中滚动小球的demo

    类似于下图的效果: 代码: <!DOCTYPE html> <html> <head> <title>Promise animation</tit ...

  5. html5模拟平抛运动

    <html> <head> <meta charset=utf-8> <title>html5炮弹</title> <script&g ...

  6. JRoll 2 使用文档（史上最强大的下拉刷新，滚动，无限加载插件）

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

  7. JRoll 2 适用于移动开发滚动（滑动）——轻量级插件

    JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. 官网:http://www.c ...

  8. iOS 传感器集锦

    https://www.jianshu.com/p/5fc26af852b6 传感器集锦:指纹识别.运动传感器.加速计.环境光感.距离传感器.磁力计.陀螺仪   效果预览.gif 一.指纹识别 应用: ...

  9. 库&插件&框架&工具

    nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部 ...

随机推荐

  1. Populating Next Right Pointers in Each Node I, II——生成next树

    1. Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode * ...

  2. Cent OS下发送邮件

    首先安装发送邮件的服务: yum install -y sendmail 安装完成之后在安装mutt yum install -y mutt 安装完成之后我们就可以发送邮件了 mutt     tes ...

  3. springMVC学习之验证

    验证框中@NotEmpty.@NotBlank.@NotNull乍一看还是容易弄混的.主要使用情况记录一下: @NotEmpty 用在集合类上面 @NotBlank 用在String上面 @NotNu ...

  4. PHP几种抓取网络数据的常见方法

    //本小节的名称为 fsockopen,curl与file_get_contents,具体是探讨这三种方式进行网络数据输入输出的一些汇总.关于 fsockopen 前面已经谈了不少,下面开始转入其它. ...

  5. Android Volley分析（一）——结构

    Volley是Android系统下的一个网络通信库.为Android提供简单高速的网络操作(Volley:Esay, Fast Networking for Android),以下是它的结构: 既然是 ...

  6. 微信热补丁 Tinker 的实践演进之路

    http://dev.qq.com/topic/57ad7a70eaed47bb2699e68e http://dev.qq.com/topic/57a30878ac3a1fb613dd40eb ht ...

  7. React项目结构

    任何一种语言.框架,在真正上手的时候,多多少少会想想怎么安排项目结构(正所谓磨刀不误砍柴工),React也不例外. google了下,拿下面3篇博客来说道说道. (1) how-to-better-o ...

  8. 一起学android之怎样卸载指定的 应用程序（25）

    效果图例如以下: 代码例如以下: public class MainActivity extends Activity { private Button btn_delete; @Override p ...

  9. xpath 轴,节点之间的关系

    http://www.w3school.com.cn/xpath/xpath_axes.asp http://www.freeformatter.com/xpath-tester.html 测试 轴可 ...

  10. Python学习笔记14：标准库之信号量（signal包）

    signal包负责在Python程序内部处理信号.典型的操作包含预设信号处理函数,暂停并等待信号,以及定时发出SIGALRM等. 要注意,signal包主要是针对UNIX平台(比方Linux, MAC ...