<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. request 发送多层字典

    a. 客户端向服务端发送多层字典的值 #客户端发送 obj = { 'data':{ "k1":"v1", "k2":"v2&qu ...

  2. JavaScript 内存机制

    简介 每种编程语言都有它的内存管理机制,比如简单的C有低级的内存管理基元,像malloc(),free().同样我们在学习JavaScript的时候,很有必要了解JavaScript的内存管理机制. ...

  3. python 调用函数时使用星号 *, **

    python 调用函数时使用星号 *, ** 调用函数时使用星号 * 或 ** test(*args):* 的作用其实就是把序列 args 中的每个元素,当作位置参数传进去.如果 args 等于 (1 ...

  4. codeforces 570 D. Tree Requests 树状数组+dfs搜索序

    链接:http://codeforces.com/problemset/problem/570/D D. Tree Requests time limit per test 2 seconds mem ...

  5. C语言各种keyword

    1.register 在函数内定义变量时.默认是 auto 类型,变量存储在内存中,当程序用到该变量时,由控制器发出指令将内存中该变量的值送到运算器,计算结束后再从运算器将数据送到内存.假设一个变量用 ...

  6. IntelliJ IDEA配置Tomcat及部署项目

    IntelliJ IDEA配置Tomcat及部署项目(原链接) 主要有以下几个要点 1.选择本地的tomcat容器. 2.可以选择修改访问路径. 3.On Update action 当我们按 Ctr ...

  7. oracle sql 当初始化数据时避免重复主键

    一:当有主键序列自动增长时候(序列为:seq_cct_id) insert into cs_cost_type (CCT_ID, CCT_NAME, CCT_RATE, CCT_RATE_TYPE, ...

  8. Continuous Integration with Selenium

    I have seen a lot of queries from people who basically want to know how to blend Selenium, Maven, an ...

  9. 计算机鼻祖-Donald Knuth（高纳德） 的传奇

    李开复说,练内功,不要仅仅花功夫学习各种流行的编程语言和工具,以及一些公司招聘广告上要求的科目.要把数据结构.算法.数据库.操作系统原理.计算机体系结构.计算机网络,离散数学等基础课程学好.最好还是试 ...

  10. ios6.0，程序为横屏，出现闪退

    本文转载至 http://blog.csdn.net/huanghuanghbc/article/details/10150355   ios6.0,程序为横屏,出现闪退 *** Terminatin ...