源码点此下载，用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. poj1195二维树状数组模板

    二维树状数组和一维的也差不多,改一下add和query函数即可:即按行修改,行内单点修改即可 /* 二维树状数组,询问一个二维区间内的数之和 */ #include<iostream> # ...

  2. python+selenium九：ddt数据驱动

    第一种,测试数据放在Excel里面 test_Login: import unittestimport timeimport ddtimport osfrom selenium import webd ...

  3. For each loop in Native C++

    今天发现 for each 语法居然可以直接编译通过,之前还以为只有开了/clr才可以支持.查了一下资料发现ms从vs2005就已经支持了.虽然不符合标准不过用着确实方便啊,必须记录一下. 具体看这里 ...

  4. 打开MSSQL 2008 R2的时候，展开数据库都显示以下的错误提示： 值不能为空。参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explorer)

    打开MSSQL 2008 R2的时候,展开数据库都显示以下的错误提示: 值不能为空.参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explo ...

  5. mysql 增加只读用户查询指定表

    GRANT SELECT ON dsideal_db.t_base_organization TO 'guanli'@'%' IDENTIFIED BY '123456';GRANT SELECT O ...

  6. IEnumerable和IEnumerator接口

    我们先思考几个问题:1.为什么在foreach中不能修改item的值?(IEnumerator的Current为只读)2.要实现foreach需要满足什么条件?(实现IEnumerator接口来实现的 ...

  7. will-change属性

    牛逼的 will-change属性 will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置.这样可以避免对页面响应速度有重要影响的昂贵成本.元素可以更 ...

  8. 000 Python的运行

    1.在命令行中运行 2.使用shell(IDLE) 3.新建.py脚本 只要是编辑器都可以 4.然后脚本在IDLE中运行 首先,需要先打开IDLE,然后使用File下面的open打开所需要的py文件, ...

  9. python中简单文件的输入三种方式

    最近在自学python,简单的总结了一下文件的输入的方式. 1. f=open("foo.txt") line=f.readline() while line: print(lin ...

  10. Android 之 <requestFocus />

    EditText中的 <requestFocus />标记?? 第一个<requestFocus />会获得焦点,意思就是如果你给某个edittext设置了<reques ...