源码点此下载，用chrome浏览器打开index.html观看。

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>飞越河谷的战机1.04 19.3.13 16:54 by:逆火狂飙 horn19782016@163.com</title>

     <style>
     *{
        margin:1px;
        padding:1px;
     }
     #canvas{
        background:#ffffff;
     }

     #controls{
        float:left;
     }
     </style>

    </head>

     <body onload="init()">
        <table border="0px">
            <tr>
                <td width="50px"valign="top">
                    <div id="controls">
                        <input id='animateBtn' type='button' value='运动'/>
                    </div>
                </td>
                <td width="100%" align="center">
                    <canvas id="canvas" width="1200px" height="562px" >
                    出现文字表示你的浏览器不支持HTML5
                    </canvas>
                </td>
            </tr>
        </table>

        <div>

        </div>

     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;

    if(paused){
        animateBtn.value="运动";

    }else{
        animateBtn.value="暂停";
        window.requestAnimationFrame(animate);
    }
}

var ctx;        // 绘图环境
var bg;            // 背景
var lastTime=0;
var fps=0;

function init(){
    bg=new Background();

    var canvas=document.getElementById('canvas');
    canvas.width=bg.width*6;
    canvas.height=bg.height*4;
    ctx=canvas.getContext('2d');

    lastTime=+new Date;
};

function update(){

}

function draw(){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

    fps=calculateFps(new Date);
    bg.setOffset(fps);

    var bgImg=bg.getImage();
    ctx.drawImage(bgImg,0,bg.height-bg.Offset,bg.width,bg.Offset,0,0,ctx.canvas.width,4*bg.Offset);
    ctx.drawImage(bgImg,0,0,bg.width,bg.height-bg.Offset,0,4*bg.Offset,canvas.width,canvas.height-4*bg.Offset);

    var plane1=new Image();
    plane1.src="1.png";
    ctx.drawImage(plane1,ctx.canvas.width/2-280,canvas.height-100);

    var plane2=new Image();
    plane2.src="2.png";
    ctx.drawImage(plane2,ctx.canvas.width/2-200,canvas.height-100);

    var plane3=new Image();
    plane3.src="3.png";
    ctx.drawImage(plane3,ctx.canvas.width/2-120,canvas.height-100);

    var plane4=new Image();
    plane4.src="4.png";
    ctx.drawImage(plane4,ctx.canvas.width/2-40,canvas.height-100);

    var plane5=new Image();
    plane5.src="5.png";
    ctx.drawImage(plane5,ctx.canvas.width/2+80,canvas.height-100);

    var plane6=new Image();
    plane6.src="6.png";
    ctx.drawImage(plane6,ctx.canvas.width/2+200,canvas.height-100);

    var e1=new Image();
    e1.src="e1.png";
    ctx.drawImage(e1,ctx.canvas.width/2-280,100);

    var e2=new Image();
    e2.src="e2.png";
    ctx.drawImage(e2,ctx.canvas.width/2-200,100);

    var e3=new Image();
    e3.src="e3.png";
    ctx.drawImage(e3,ctx.canvas.width/2-120,110);

    var e4=new Image();
    e4.src="e4.png";
    ctx.drawImage(e4,ctx.canvas.width/2-20,80);

    var e5=new Image();
    e5.src="e5.png";
    ctx.drawImage(e5,ctx.canvas.width/2+80,130);

    var e6=new Image();
    e6.src="e6.png";
    ctx.drawImage(e6,ctx.canvas.width/2+160,100);

    var e7=new Image();
    e7.src="e7.png";
    ctx.drawImage(e7,ctx.canvas.width/2-280,200);

    var e8=new Image();
    e8.src="e8.png";
    ctx.drawImage(e8,ctx.canvas.width/2-120,200);

    /*
    ctx.font="bold 16px 宋体";
    ctx.fillStyle='white';
    ctx.fillText("FPS:"+Math.floor(fps),20,40);
    */
}

function calculateFps(now){
    var retval=1000/(now-lastTime);
    lastTime=now;
    // console.log("fps",retval)
    return retval;
}

function animate(){
    if(!paused){
        update();
        draw();
    }

    window.requestAnimationFrame(animate);
}

//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>点类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Point=function(x,y){
    this.x=x;
    this.y=y;
}
Point.prototype={
    x:0,            // 横坐标
    y:0,            // 纵坐标
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<点类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>背景类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Background=function(){
    this.width=104;
    this.height=156;
    this.files=['bgBlue.jpg','bgRiver.jpg','bgSky.jpg','bgVolcano.jpg'];
    this.Offset=0;
    this.velocity=40;
}
Background.prototype={
    width:104,                // 背景图片原始宽度
    height:156,                // 背景图片原始高度
    files:[],                // 图片数组
    Offset:0,                // 偏移值
    velocity:40,            // 背景移动速度
    loopValue:0,            // 循环累加值,用来确定时哪一张图片

    getImage:function(){
        this.loopValue++;
        if(this.loopValue>=3999){
            this.loopValue=0;
        }

        var index=Math.floor(this.loopValue/1000);
        var img=new Image();
        img.src=this.files[index];
        return img;
    },

    setOffset:function(fps){
        this.Offset=this.Offset<this.height?this.Offset+this.velocity/fps:0;
    },
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<背景类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

//-->
</script>

2019年3月13日18点32分

[Canvas]双方战机展示的更多相关文章

  1. 基于 HTML5 Canvas 的元素周期表展示

    前言 之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”.“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青 ...

  2. Canvas基础认识

    HTML5 Canvas         简单的说就是js+html5可以自定义绘制任何图形 认识Canvas元素 <canvas id="canvas" width=&qu ...

  3. 解决canvas转base64/jpeg时透明区域变成黑色背景的方法

    最近在工作遇到一个问题,在将png图片转jpeg时,透明区域被填充成黑色,通过网上的介绍找到了解决的方法,现在总结下分享给同样遇到这个问题的朋友们,感兴趣的可以通过本文详细学习下. 在用canvas将 ...

  4. 移动端 canvas插入多张图片生成一张可保存到手机图片

    第一次写随笔,想把开发中遇到的问题与大家分享,可能会让您少走一步弯路. 先看下效果图: 代码分三部分为大家展示: 1.html 部分 <div id="myQrcontainer&qu ...

  5. HTML5中canvas介绍

    1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...

  6. HTML5系列：HTML5绘图

    1. canvas元素基础 canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形. 在页面中使用canvas元素绘制图形需要经过的三个步骤: 步骤一  使用canvas元素创建一个画布区 ...

  7. 数据可视化(1)--Chart.js

    Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...

  8. “等一下，我碰！”——常见的2D碰撞检测

    转自:https://aotu.io/notes/2017/02/16/2d-collision-detection/ 在 2D 环境下,常见的碰撞检测方法如下: 外接图形判别法 轴对称包围盒(Axi ...

  9. OpenLayers典型部分概述

    中文学习:http://www.openlayers.cn/portal.php 原文地址:https://www.jianshu.com/p/e693711a7008 一 OpenLayers核心职 ...

随机推荐

  1. gcd,lcm

    定理:gcd(a,b)*lcm(a,b)=a*b; 更相损减术:gcd(a,b)=gcd(b,a-b)=gcd(a,a-b) 欧几里得算法:gcd(a,b)=gcd(b,a mod b) 复杂度O(l ...

  2. iOS学习笔记之Block

    写在前面 学习iOS开发的过程中,在很多场合都遇到了Block.说实话,虽然自己依葫芦画瓢的将Block"拿来"用着,但这种"拿来主义"与学习时应持有的探索精神 ...

  3. python接口自动化测试十七：使用bs4框架进行简单的爬虫

    安装:beautifulsoup4 from bs4 import BeautifulSoup yoyo = open('yoyo.html', 'r')   # 以读的方式打开“yoyo.html” ...

  4. springbank 开发日志 SpringMVC是如何找到handler找到对应的方法并执行的

    从DispatcherServlet说起,本文讨论的内容都是DispatcherServlet的doDispatch方法完成 mappedHandler是一个HandlerExecutionChain ...

  5. python全栈开发知识点补充for else和while else如果不是除正常以外的其他方式退出循环,那么else语句就会被执行。

    如果不是除正常以外的其他方式退出循环,那么else语句就会被执行. 也就是循环体内没有break语句.return语句.和其他异常语句的执行. for   else >>> for ...

  6. memcache的简单使用示例

    在实际应用中我们会缓存从数据库中查出来的结果集,以md5($sql)为$key,结果集为值. 以只是在php简单应用代码: <?php //建立memcache链接 $memcache = ne ...

  7. POJ 3279 Fliptile (二进制枚举)

    <题目链接> <转载于 >>> > 题目大意: 给定一个M*N矩阵,有些是黑色(1表示)否则白色(0表示),每翻转一个(i,j),会使得它和它周围4个格变为另 ...

  8. Burp Suite之爬网模块（二）

    Spider功能 Burp Spider爬网介绍 Burp Spider 是一个映射 web 应用程序的工具.它使用多种智能技术对一个应用程序的内容和功能进行全面的清查. 通过跟踪 HTML 和 Ja ...

  9. 8，EasyNetQ-多态发布和订阅

    您可以订阅一个接口,然后发布该接口的实现. 我们来看一个例子. 我有一个接口IAnimal和两个实现猫和狗: public interface IAnimal { string Name { get; ...

  10. 洛谷 P2574 XOR的艺术(线段树 区间异或 区间求和)

    To 洛谷.2574 XOR的艺术 题目描述 AKN觉得第一题太水了,不屑于写第一题,所以他又玩起了新的游戏.在游戏中,他发现,这个游戏的伤害计算有一个规律,规律如下 1. 拥有一个伤害串为长度为n的 ...