<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. vs项目添加链接文件

    在vs2012(或以后版本)中,从一个项目中拖拽文件到另一项目,并按住alt键,会生成链接文件. 项目文件中会生成link节点. <ItemGroup> <Compile Inclu ...

  2. 【CODEFORCES】 B. Dreamoon and Sets

    B. Dreamoon and Sets time limit per test 1 second memory limit per test 256 megabytes input standard ...

  3. Qt在线讲座之QML脚本书写规范

    时间:2016年3月1日晚7:30 在线讲座:http://qtdream.com主页处就可以收看直播(详见主页提示) 參与对象:对Qt跨平台开发框架感兴趣的朋友们.当然了,假设你是大牛.也可以旁听一 ...

  4. IGP和EGP（转载）

    AS(自治系统) - 也称为路由域,是指一个共同管理区域内的一组路由器.例如公司的内部网络和 Internet 服务提供商的网络.由于 Internet 基于自治系统,因此既需要使用内部路由协议,也需 ...

  5. arcgis for javascript 隐藏或显示底图

    arcgis for javascript展示地图的时候,有图层的概念,一层一层的,类似photoshop,在应用界面上控制图层的显隐,是极常见的功能. 但是,如果是控制底图的显示或隐藏呢,怎么搞? ...

  6. iOS开发-14款状态栏(StatusBar)开源软件

    本文转载至 http://mobile.51cto.com/hot-418125.htm 之前逛街看到移动做推广,有一个定位应用挺好的,合理的利用了状态栏,做了一些消息提醒和隐藏动画,自己回家就做了一 ...

  7. EasyPusher/EasyDarwin/EasyPlayer实现手机直播版本及效果整理

    EasyPusher手机直播 实现功能 最近很多EasyDarwin爱好者提出了手机移动端直播的功能需求,尤其是如何做出像映客这样能够快速出画面播放的效果,经过一段时间的移动端和服务端的优化,Easy ...

  8. vs添加对dll的引用

    我们在使用vs进行开发调试的时候经常会遇到一个问题,就是当我们的主工程引用到其他工程更新的dll(我们经常采用copy到工程目录的方法).亦或者当我们的多个工程引用到同一个dll文件的时候,我们怎么来 ...

  9. Hibernate中的HQL语言

    一.HQL语言简介 HQL全称是Hibernate Query Language,它提供了是十分强大的功能,它是针对持久化对象,直接取得对象,而不进行update,delete和insert等操作.而 ...

  10. Möbius strip

    en.wikipedia.org/wiki/Möbius_strip http://mechproto.olin.edu/final_projects/average_jo.html Fabricat ...