[Canvas]飞机飞越河谷(背景向下平滑移动)
请点击此处下载代码并用Chrome浏览器打开观看。
图例:
代码:
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>动态背景3 19.3.4 12:43 by:逆火狂飙 horn19782016@163.com</title> <style> #canvas{ background:#ffffff; cursor:pointer; margin-left:10px; margin-top:10px; -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5); -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5); box-shadow:3px 3px 6px rgba(0,0,0,0.5); } #controls{ margin-top:10px; margin-left:15px; } </style> </head> <body onload="init()"> <div id="controls"> <input id='animateBtn' type='button' value='运动'/> </div> <canvas id="canvas" width="1200px" height="562px" > 出现文字表示你的浏览器不支持HTML5 </canvas> </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 bgOffset; var bgVelocity; var lastTime=0; var fps=0; var plane; function init(){ bg=new Image(); bg.src="riverBg.jpg"; bg.width=104; bg.height=156; plane=new Image(); plane.src="yellowPlane.png"; // init Canvas var canvas=document.getElementById('canvas'); canvas.width=bg.width*4; canvas.height=bg.height*4; ctx=canvas.getContext('2d'); bgOffset=0; bgVelocity=40; lastTime=+new Date; }; function update(){ } function draw(){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); fps=calculateFps(new Date); bgOffset=bgOffset<bg.height?bgOffset+bgVelocity/fps:0; ctx.drawImage(bg,0,bg.height-bgOffset,bg.width,bgOffset,0,0,ctx.canvas.width,4*bgOffset); ctx.drawImage(bg,0,0,bg.width,bg.height-bgOffset,0,4*bgOffset,canvas.width,canvas.height-4*bgOffset); ctx.drawImage(plane,ctx.canvas.width/2-50,canvas.height-100); } 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); } //--> </script>
以上部分Title没改,和之前的例子可能会重复,见谅。
2019年3月12日10点55分
http://vt1.doubanio.com/201903121827/e4eb397bc8878e8e9c94e47fa2b1cc4b/view/movie/M/402410917.mp4
[Canvas]飞机飞越河谷(背景向下平滑移动)的更多相关文章
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 如何把canvas元素作为网站背景总结详解
如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...
- (转)不停止Nginx服务的情况下平滑变更Nginx配置
在不停止Nginx服务的情况下平滑变更Nginx配置 1.修改/usr/local/webserver/nginx/conf/nginx.conf配置文件后,请执行以下命令检查配置文件是否正确: /u ...
- Nginx在线服务状态下平滑升级及ab压力测试【转】
今天,产品那边发来需求,说有个 APP 的 IOS 版本下载包需要新增 https 协议,在景安购买了免费的 SSL 证书.当我往 nginx 上新增 ssl 时,发现服务器上的 nginx 居然没编 ...
- 【前端】jQuery实现锚点向下平滑滚动特效
jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...
- 8-13 canvas专题-阶段练习二(下)
8-13 canvas专题-阶段练习二(下) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
- Egret学习笔记 (Egret打飞机-3.实现背景循环滚动)
游戏背景里面的猪脚飞机看起来是一直在向前飞,但是实际上只是一个视觉差而已. 猪脚是出于不动的状态,背景从上到下滚动,然后让玩家觉得飞机在不停的往前飞.(当然这只是其中一种实现思路) 差不多就是这样,然 ...
- Canvas入门到高级详解(下)
四. Canvas 开发库封装 4.1 封装常用的绘制函数 4.1.1 封装一个矩形 //思考:我们用到的矩形需要哪些绘制的东西呢? 矩形的 x.y坐标 矩形的宽高 矩形的边框的线条样式.线条宽度 矩 ...
- 用Canvas为网页加入动态背景
近期刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务. 考虑到页面仅仅在手机中浏览.并且手机对canvas的支持又很好,所以打算使用canvas做点不一样的动画. 首先来看下效果 ...
随机推荐
- brew装snappy
brew装snappy,我在mac上已经开了socks5代理,也尝试了lantern或者duotai.org,结果都下载不动. 解决方法:把snappy包手动从浏览器下载,然后放到缓存目录,再执行br ...
- ubuntu16.04LTS服务器,python2.7升级到3.6,且同时升级pip
ubuntu这个服务器,默认是带了python2.7和python3.5版本的. 如果想升级到python3.6,怎么办? 我综合了网上的几个帖子,在几台服务器上测试了一下, 没什么大问题,作个记录. ...
- 基于jsp+servlet图书管理系统之后台用户信息插入操作
前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研 ...
- [CQOI2017]小Q的棋盘
题解: 好像有题解说可以贪心.. 显然这是一棵树,考虑树形dp 维护f[i][j]从点i往下走j再回来经过的最多点,g[i][j]从点i往下走j不用回来经过的最多点 转移方程还是挺显然的,枚举的时候像 ...
- 007 关于Spark下的第二种模式——standalone搭建
一:介绍 1.介绍standalone Standalone模式是Spark自身管理资源的一个模式,类似Yarn Yarn的结构: ResourceManager: 负责集群资源的管理 NodeMan ...
- HDU 6114 Chess【逆元+组合数】(组合数模板题)
<题目链接> 题目大意: 車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子.一天,小度在棋盘上摆起了许多車……他想知道,在一共N×M个点的矩形棋盘中摆最多个数的車使 ...
- SQLite中的SELECT子句使用别名
SQLite中的SELECT子句使用别名 开发者可以使用AS关键字为指定的列名提供一个新的别名,其语法形式如下 SELECT column_name AS Alias [,…] 例如,下面的SQL语句 ...
- window配置右键菜单
window配置右键菜单 cmd -> regeidt :打开注册表 文件右键 依次点开HKEY_CLASSES_ROOT ---> * ---> shell. 右键shell,新建 ...
- AngularJS checkbox/复选框 根据缓存数据实时显示
想缓存选择按钮时,可以使用这样的方法. index.html <!DOCTYPE html> <html data-ng-app="App"> <he ...
- mysql参数innodb_flush_log_at_trx_commit
查看mysql数据库innodb_flush_log_at_trx_commit : mysql> SHOW GLOBAL VARIABLES LIKE 'innodb_flush_log%'; ...