<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. icmp的程序（ping的实现）

    code来源于<网络编程与分层协议设计> chap7 ICMP协议程序设计 ----没有理解,没有编译,只是敲了出来 ping.h #define ICMP_ECHOREPLY 0#def ...

  2. Mysql多线程性能测试工具sysbench 安装、使用和测试

    From:http://www.cnblogs.com/zhoujinyi/archive/2013/04/19/3029134.html 摘要:      sysbench是一个开源的.模块化的.跨 ...

  3. javaweb dev 入

    ::::关于jsp页面和servlet之间传递参数 JSP与 servlet之间的传值有两种情况:JSP -> servlet, servlet -> JSP. 通过对象 request和 ...

  4. 升级OpenSSL修复高危漏洞Heartbleed

    升级OpenSSL修复高危漏洞Heartbleed 背景:          OpenSSL全称为Secure Socket Layer.是Netscape所研发.利用数据加密(Encryption) ...

  5. MySQL 创建自定义函数(1)

    1. 创建测试自定义函数(1) CREATE DEFINER=`dbdh`@`localhost` FUNCTION `test`.`sp_function_dbdh_three`() RETURNS ...

  6. iOS 优化方案浅析

    本文转载至 http://mobile.51cto.com/iphone-413256.htm Windows独特的注册表机制以及复杂的进程.内存管理,给了很多PC“优化”类软件极大的机遇,比如奇虎3 ...

  7. 网络摄像机IPCamera RTSP直播播放网络/权限/音视频数据/花屏问题检测与分析助手EasyRTSPClient

    前言 最近在项目中遇到一个奇怪的问题,同样的SDK调用,访问海康摄像机的RTSP流,发保活OPTIONS命令保活,一个正常,而另一个一发就会被IPC断开,先看现场截图: 图1:发OPTIONS,摄像机 ...

  8. 九度OJ 1098：字母统计 （计数）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3720 解决:1809 题目描述: 输入一行字符串,计算其中A-Z大写字母出现的次数 输入: 案例可能有多组,每个案例输入为一行字符串. 输 ...

  9. Performance Tuning Using Linux Process Management Commands

    [root@bigdata-server-02 /]# ps --help all Usage: ps [options] Basic options: -A, -e all processes -a ...

  10. java之折半查找

    //功能:二分查找import java.util.*; public class Demo1 { public static void main(String[] args) { int arr[] ...