<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. vs2010音频文件压缩 调用lame_enc.dll将WAV格式转换成MP3

    /* //My_lame.h */ #pragma once#include "stdafx.h"#include <windows.h>#include <st ...

  2. MVC上传多张图片

    改变上传文件的按钮样式: <div id="post-upload-image"> <div id="divfile_-1"> < ...

  3. ZOJ 1516 Uncle Tom&#39;s Inherited Land（二分匹配 最大匹配 匈牙利啊）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=516 Your old uncle Tom inherited a p ...

  4. ubuntu 安装后的配置

    osx 下用 vmware 安装了一个 ubuntu 虚拟机,版本是 14.04 server.安装完之后要做一系列配置,记录如下. 配置 Android 编译环境 sudo apt-get inst ...

  5. mysql_num_rows

    mysql记录总条数 $sql3 = "select * from inviter where tuijianren = '$session' "; $res3 = mysql_q ...

  6. mongodb查看连接数、同步时间、oplog及修改表名的操作

    1) mongodb查看连接数: db.serverStatus().connections; 2) mongodb查看同步时间: db.printSlaveReplicationInfo();  % ...

  7. Nmap扫描教程之基础扫描具体解释

    Nmap扫描教程之基础扫描具体解释 Nmap扫描基础扫描 当用户对Nmap工具了解后,就可以使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具能够分别对主机.port.版本号.操作系统等实施扫 ...

  8. WPF自定义Popup和弹出菜单

    Popup: <StackPanel Grid.Column="0" Grid.Row="6" Orientation="Horizontal& ...

  9. Mvc创建并注册防盗链

    创建CustomHandler.JpgHandler public class JpgHandler : IHttpHandler { public void ProcessRequest(HttpC ...

  10. jQuery功能强大的图片查看器插件

    简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...