[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核心职 ...
随机推荐
- cf789d 图论计数,自环闭环
一开始没有思路,以为要判联通块. 其实不是判断联通块,而是判断边是否连在一起,没有连边的点可以忽略不计 /* 分情况讨论: 1.忽略自环,那么要取出两条相连的普通变作为只经过一次的边 2.一条自环,一 ...
- Ubuntu 下安装LEMP环境 实战
---恢复内容开始--- 1.nginx的服务端的安装 打开命令行终端,在终端输入,sudo apt-get install nginx 回车即开始安装 kxlc-t@ubuntu:~$ sudo ...
- 注解工具ButterKnife用法和注意点
// implementation 'com.android.support:appcompat-v7:28.0.0-Beta1' // implementation 'com.android.sup ...
- 安装elasticsearch-7.0.0及插件
下载安装包:(下载地址:https://www.elastic.co/cn/downloads/elasticsearch)elasticsearch-7.0.0-linux-x86_64.tar.g ...
- P2700 逐个击破 最小生成树
题目描述 现在有N个城市,其中K个被敌方军团占领了,N个城市间有N-1条公路相连,破坏其中某条公路的代价是已知的,现在,告诉你K个敌方军团所在的城市,以及所有公路破坏的代价,请你算出花费最少的代价将这 ...
- CentOS root用户修改密码
1.root用户修改密码: #passwd -------------------------------- 参考资料: 1.Centos修改root密码:http://blog.163.com/wz ...
- Android超链接
第一种: text += "<a href='http://www.baidu.com'>百度超链接</a>"; CharSequence charSequ ...
- pyrhon SQLite数据库
pyrhon SQLite数据库 目录 介绍 导入模块 创建数据库/打开数据库 创建表 在表中插入行 查询/修改 删除表中的行 删除表 介绍 Python SQLITE数据库是一款非常小巧的嵌入式开源 ...
- Docker镜像优化
前言 上篇博文说到使用Visual Studio Tools for Docker帮助我们生成Dockerfile,现在我们讨论下生成的Dockerfile的优劣. 一.以往Dockerfile构建模 ...
- SQLite中的SELECT子句
SQLite中的SELECT子句 目前为止,最常见的SELECT语句由三个子句组成,分别为SELECT.FROM与WHERE.本小节我们首先讲解SELECT子句.SELECT子句可以用来定义最终结果表 ...