<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. Java面向对象基础三

    1.函数的重载 2.构造函数的作用 (构造函数能够重载) 1.函数名必须和类名同样 2.没有返回值 3.使用 New 来调用构造函数 4.假设类中没有构造函数,编译器会自己主动帮忙载入一个參数为空.方 ...

  2. python--面向对象组合

    面向对象的命名空间 类中的方法   类中的静态属性   对象的属性类的组合应用 面向对象的命名空间 class A: country='中国' a=A() a.name='alex' print(a. ...

  3. 九度OJ 1109：连通图 （最小生成树）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2783 解决:1432 题目描述: 给定一个无向图和其中的所有边,判断这个图是否所有顶点都是连通的. 输入: 每组数据的第一行是两个整数 n ...

  4. 解决express video 手机无法播放的问题

    http://stackoverflow.com/questions/24976123/streaming-a-video-file-to-an-html5-video-player-with-nod ...

  5. 不使用库函数，编写函数int strcmp(char *source, char *dest) 相等返回0，不等返回-1【转】

    本文转载自:http://www.cppblog.com/mmdengwo/archive/2011/04/14/144253.aspx #include <stdio.h>#includ ...

  6. STL版 括号匹配（感觉不如之前自己用数组模拟的跑的快）

    数据结构实验之栈四:括号匹配 Time Limit: 1000MS Memory limit: 65536K 题目描述  给你一串字符,不超过50个字符,可能包括括号.数字.字母.标点符号.空格,你的 ...

  7. .net2.0 C# Json反序列化

    http://cjl20082002.blog.163.com/blog/static/120827332009511103457637/ 去:http://json.codeplex.com/下载  ...

  8. opengl in medical imaging

    医学可视化 http://schorsch.efi.fh-nuernberg.de/roettger/index.php/Lectures/MedicalVisualization http://ww ...

  9. zkui部署

    1.拉取代码 #git clone https://github.com/DeemOpen/zkui.git 2.构建并安装程序 #cd zkui/ #yum install -y maven #mv ...

  10. 生成chm格式帮助文档的步骤

    开场前,道具先得被齐全了. 道具:struts2的开源代码(以生成struts2的帮助文档为例).chm格式生成工具jd2chm.exe(网上有) 好了,准备演出 1.在eclipse中新建一个jav ...