[Canvas]双方战机展示

源码点此下载，用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]双方战机展示的更多相关文章

基于 HTML5 Canvas 的元素周期表展示
前言之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”.“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青 ...
Canvas基础认识
HTML5 Canvas 简单的说就是js+html5可以自定义绘制任何图形认识Canvas元素 <canvas id="canvas" width=&qu ...
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
最近在工作遇到一个问题,在将png图片转jpeg时,透明区域被填充成黑色,通过网上的介绍找到了解决的方法,现在总结下分享给同样遇到这个问题的朋友们,感兴趣的可以通过本文详细学习下. 在用canvas将 ...
移动端 canvas插入多张图片生成一张可保存到手机图片
第一次写随笔,想把开发中遇到的问题与大家分享,可能会让您少走一步弯路. 先看下效果图: 代码分三部分为大家展示: 1.html 部分 <div id="myQrcontainer&qu ...
HTML5中canvas介绍
1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...
HTML5系列：HTML5绘图
1. canvas元素基础 canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形. 在页面中使用canvas元素绘制图形需要经过的三个步骤: 步骤一使用canvas元素创建一个画布区 ...
数据可视化(1)--Chart.js
Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...
“等一下，我碰！”——常见的2D碰撞检测
转自:https://aotu.io/notes/2017/02/16/2d-collision-detection/ 在 2D 环境下,常见的碰撞检测方法如下: 外接图形判别法轴对称包围盒(Axi ...
OpenLayers典型部分概述
中文学习:http://www.openlayers.cn/portal.php 原文地址:https://www.jianshu.com/p/e693711a7008 一 OpenLayers核心职 ...

随机推荐

inoremap nnoremap vnoremap
原贴:https://www.xuebuyuan.com/zh-hant/1116162.html inoremap nnoremap vnoremap i insert 在插入模式有效 n 在普通 ...
JMeter 聚合报告 90%响应时间
90%的响应时间理解官方解释:90% Line - 90% of the samples took no more than this time. The remaining samples at ...
python 全栈开发，Day31(re模块)
回顾昨天的内容异常处理 try except 一定要在except之后写一些提示或者处理的内容 try: '''可能会出现异常的代码''' except ValueError: '''打印一些提示或 ...
CSP 地铁修建 Kruskal (最小生成树+并查集)
问题描述 A市有n个交通枢纽,其中1号和n号非常重要,为了加强运输能力,A市决定在1号到n号枢纽间修建一条地铁. 地铁由很多段隧道组成,每段隧道连接两个交通枢纽.经过勘探,有m段隧道作为候选,两个交通 ...
【AtCoder】ARC082
C - Together 用一个数组记一下一个数给它本身,左右贡献都是1,看看哪个数的总贡献最大 #include <bits/stdc++.h> #define fi first #de ...
BZOJ1084 [SCOI2005]最大子矩阵动态规划
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解题目传送门 - BZOJ1084 题意概括这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注 ...
021 使用join()将数组转变为字符串
1.定义用用法 join() 方法用于把数组中的所有元素放入一个字符串. 元素是通过指定的分隔符进行分隔的. 语法 arrayObject.join(separator) 返回值返回一个字符串.该字 ...
031 分布式中，zookeeper的部署
一:准备 1.概述为分布式应用提供协调服务的项目提供一个简单的原语集合,以便于分布式应用可以在它之上构建更高层次的同步服务. 类似于文件系统那样的树形数据结构目的:将分布式服务不再由于协作冲突而 ...
[OpenCV-Python] OpenCV 中的图像处理部分 IV (四）
部分 IVOpenCV 中的图像处理 OpenCV-Python 中文教程(搬运)目录 21 OpenCV 中的轮廓 21.1 初识轮廓目标 • 理解什么是轮廓 • 学习找轮廓,绘制轮廓等 • 函数: ...
Enrolment API
由于Moodle 2.0有一个用户注册的新概念,它们完全独立于角色和功能.能力通常与注册状态结合使用. 什么是注册? 登记的用户可以完全参加一门课程.活跃用户注册允许用户输入课程.只有注册的用户可能是 ...

[Canvas]双方战机展示

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

随机推荐

热门专题