源码点此下载，用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. poj2823 单调队列初步

    什么是单调队列:头元素一直是队列当中的最大值,队列中的值按照递减顺序排列,可以从末尾插入一个元素,或从两段删除元素 1.插入元素,为了保证队列的单调性(这里假设为递减性),在插入元素v时要将对位的元素 ...

  2. Django2.0使用dos新建项目

    由于本人的Pycharm不能直接生成Django项目,所以用命令行来生成项目,搭建此项目,请先搭建好环境 环境:PyCharm Python3.5.2 Django 2.0  1.使用dos进入工作目 ...

  3. python 全栈开发，Day5(字典,增删改查,其他操作方法)

    一.字典 字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.存储大量的数据,是关系型数据,查询数据快. 列表是从头遍历到尾字典使用二分查找 二分查找也称折半查找(Bi ...

  4. Windows系统下oracle数据库每天定时备份

    第一步:建立备份脚本oraclebackup.bat 首先建立一个备份bat文件,在D盘下新建备份目录oraclebackup,将oracle安装目录下的EXP.EXE复制到此目录下,再新建一个文本文 ...

  5. [CQOI2017]小Q的棋盘

    题解: 好像有题解说可以贪心.. 显然这是一棵树,考虑树形dp 维护f[i][j]从点i往下走j再回来经过的最多点,g[i][j]从点i往下走j不用回来经过的最多点 转移方程还是挺显然的,枚举的时候像 ...

  6. Codeforces 514E Darth Vader and Tree 矩阵快速幂

    Darth Vader and Tree 感觉是个很裸的矩阵快速幂, 搞个100 × 100 的矩阵, 直接转移就好啦. #include<bits/stdc++.h> #define L ...

  7. 026 使用大数据对网站基本指标PV案例的分析

    案例: 使用电商网站的用户行为日志进行统计分析 一:准备 1.指标 PV:网页流浪量 UV:独立访客数 VV:访客的访问数,session次数 IP:独立的IP数 2.上传测试数据 3.查看第一条记录 ...

  8. Python - __name__ == '__main__'

    if __name__ == '__main__': app.run() __name__系统变量指示模块应如何被加载,他的值为"__main__"时表示当前模块是被直接执行. _ ...

  9. 如何在MacBook的以太网端口上成功运行DHCP服务器？

    我的目标是在我的MacBook以太网端口上安装一个以太网交换机,我将通过DHCP连接几个Raspberry Pi连接,每个都将运行VNC服务器进行远程访问,我希望我的互联网可以从我的MacBook的W ...

  10. Linux学习之常用网络通信命令与shell简单应用技巧(四)

    (一)常用网络通信命令 (1)ping命令 (2)write命令 (3)wall命令 (4)ifconfig命令 (5)shutdown命令 (6)reboot命令 (二)shell简单应用技巧 (1 ...