<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. odoo高级物流应用：跨厂区生产

    业务情景 半成品在分厂生产,然后再在总厂组装 半成品所需的原材料存储在分厂的仓库 总厂需要的原材料储存在总厂的仓库 公用的原材料储存在总厂的仓库     解决方案 使用仓库间的供应 设置合适的Rout ...

  2. Java数据库访问技术

    1.Java集合: Collection Map List: 位于 java.util包中. Arraylist 顺序结构.Linkedlist 链表结构 // List<NewsClassif ...

  3. Linux上mysql修改密码

    http://www.cnblogs.com/wangjiangze/archive/2011/03/03/1970105.html   MySQL中修改密码及访问限制设置详解

  4. Windows 系统 vs2012 MinGW 编译ffmpeg 静态库

    Windows系统下 vs2012编译ffmpeg 动态库 前面已经有文章讲述,本文将讲述如果编译生成ffmpeg静态库以方便 在vs2012下调用. 准备工作:安装MinGW环境,修改ffmpeg配 ...

  5. 利用反射快速给Model实体赋值 使用 Task 简化异步编程 Guid ToString 格式知多少？(GUID 格式) Parallel Programming-实现并行操作的流水线（生产者、消费者） c# 无损高质量压缩图片代码 8种主要排序算法的C#实现 （一） 8种主要排序算法的C#实现 （二）

    试想这样一个业务需求:有一张合同表,由于合同涉及内容比较多所以此表比较庞大,大概有120多个字段.现在合同每一次变更时都需要对合同原始信息进行归档一次,版本号依次递增.那么我们就要新建一张合同历史表, ...

  6. kubernetes管理之使用yq工具截取属性

    系列目录 前面我们讲解过使用go-template或者jsonpath格式(kubectl get 资源 --output go-tempalte(或jsonpath))来截取属性的值,并且我们比较了 ...

  7. 备忘：js正则表达式中的元字符

    Predefined term Matches \t Horizontal tab \b Backspace \v Vertical tab \f Form feed \r Carriage retu ...

  8. memcache及其telnet命令使用详解

    1.启动Memcache 常用参数memcached 1.4.3-p <num>      设置端口号(默认不设置为: 11211)-U <num>      UDP监听端口 ...

  9. 左儿子右兄弟Trie UVA 11732 strcmp() Anyone?

    题目地址: option=com_onlinejudge&Itemid=8&category=117&page=show_problem&problem=2832&qu ...

  10. ElasticSearch（十三） bulk api奇特的json格式的原因

    bulk api的语法 正常的语法: {"action": {"meta"}}\n {"data"}\n {"action&quo ...