源码点此下载，用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. jquery----js/css 导入

    <script type"text/javascript" src="JS文件"></script> <link rel = &q ...

  2. 【C++ Primer 第11章 练习答案】2. 关联容器概述

    11.2.1节练习 [练习11.7]代码: #include<iostream> #include<string> #include<vector> #includ ...

  3. SVN提交，提示“remains in conflict”错误

    SVN commit时,提示"remains in conflict"错误: 1.error出现原因: 在本地项目删除了一个目录,又通过SVN的"Repo-browser ...

  4. 取消a标签或者onclick在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...

  5. C语言 —— sprintf()函数

    sprintf() 函数 例如: #include<stdio.h> int main() { //注意s一定要先初始化! *sizeof(char)); //或char s[40]; s ...

  6. DP-hdu1260

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1260 题目描述: 题目大意:每一个人去电影票买票,有两种买票方法:1.自己单人买:2.与前面的人一起买 ...

  7. Python打包方法——Pyinstaller (转)

      Python版本:Python3.5.2 一.安装Pyinstaller 1.安装pywin32 下载安装文件:查找到跟自己适用的python版本及window系统版本匹配的pywin32,下载后 ...

  8. vim编辑器基本操作

    命令模式: 按(i)键进入编辑模式,将在光标前面插入: 按(I)键进入编辑模式,将在光标行首插入: 按(a)进入编辑模式,在光标后面插入: 按(A)键进入编辑模式,将在光标行末插入: 按(o)进入编辑 ...

  9. 14，EasyNetQ-使用EasyNetQ.Hosepipe重新提交错误消息

    EasyNetQ队列管理实用程序. 用它从队列中抓取消息并重新发布. 还可以用它来检查错误队列消息并重试它们. 1,用法: EasyNetQ.Hosepipe.exe <command> ...

  10. 使用starUML一步一步画顺序图

    顺序图:是UML中能表现出一个过程中各个详细步骤的模型图,过程可以理解为一个功能的执行过程. 下面我们以一个简单的影院管理系统中售票功能为例来一步一步完成顺序图的构建. 建模工具:starUML 版本 ...