请点击此处下载代码并用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]飞机飞越河谷（背景向下平滑移动）的更多相关文章

  1. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  2. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

  3. (转)不停止Nginx服务的情况下平滑变更Nginx配置

    在不停止Nginx服务的情况下平滑变更Nginx配置 1.修改/usr/local/webserver/nginx/conf/nginx.conf配置文件后,请执行以下命令检查配置文件是否正确: /u ...

  4. Nginx在线服务状态下平滑升级及ab压力测试【转】

    今天,产品那边发来需求,说有个 APP 的 IOS 版本下载包需要新增 https 协议,在景安购买了免费的 SSL 证书.当我往 nginx 上新增 ssl 时,发现服务器上的 nginx 居然没编 ...

  5. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  6. 8-13 canvas专题-阶段练习二（下)

    8-13 canvas专题-阶段练习二(下) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  7. Egret学习笔记 (Egret打飞机-3.实现背景循环滚动)

    游戏背景里面的猪脚飞机看起来是一直在向前飞,但是实际上只是一个视觉差而已. 猪脚是出于不动的状态,背景从上到下滚动,然后让玩家觉得飞机在不停的往前飞.(当然这只是其中一种实现思路) 差不多就是这样,然 ...

  8. Canvas入门到高级详解(下)

    四. Canvas 开发库封装 4.1 封装常用的绘制函数 4.1.1 封装一个矩形 //思考:我们用到的矩形需要哪些绘制的东西呢? 矩形的 x.y坐标 矩形的宽高 矩形的边框的线条样式.线条宽度 矩 ...

  9. 用Canvas为网页加入动态背景

    近期刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务. 考虑到页面仅仅在手机中浏览.并且手机对canvas的支持又很好,所以打算使用canvas做点不一样的动画. 首先来看下效果 ...

随机推荐

  1. 【python】logging记录traceback

    import logging try: do-something-block except: logging.exception("Exception Logged")

  2. ubuntu 语言设置

    1.ubuntu ibus 输入法无法切换拼音 原因未安装中文输入法 sudo apt install ibus-pinyin //安装pinyinwin + space(空格) 切换中文输入法 再用 ...

  3. Laravel firstOrNew 与 firstOrCreate 的区别

    例如: $item = App\Deployment::firstOrNew( ['name' => '问答小程序'], ['delayed' => 1] ); firstOrNew 需要 ...

  4. Windows安装使用Openssl

    1.什么是openssl? 2.下载安装 三方下载地址 备用64位和32位下载地址 选择32位或者64位合适的版本下载,例如Win64OpenSSL_Light-1_0_2h.exe: 设置环境变量, ...

  5. 基于 OSGi 的面向服务的组件编程，helloworld

    基于 OSGi 的面向服务的组件编程 OSGi(Open Services Gateway Initiative,开放服务网关协议)提供了一个面向服务组件的编程模型,基于 OSGi 编程,具有模块化, ...

  6. requirejs模块路径配置问题

    三种情况:一.设置data-main,没配置baseUrl,以data-main的文件为基准:二.设置data-main,配置baseUrl,baseUrl以值以引用require.js的HTML为基 ...

  7. sed & awk之sed

    sed处理文本的方法 sed在处理文本时,会先读取第一个输入行,将编辑命令应用于输入行,然后读取下一个输入行,并应用编辑命令.sed总是处理最新版本的行,因此sed中有多个编辑命令时,编辑命令的顺序对 ...

  8. UC浏览器中Ajax请求中传递数据的一个坑

    今天突然收到一个bug,有用户在其浏览器环境中一直无法提交内容,使用的是UC浏览器.当换成Chrome时,内容能够正常提交.鉴于本地没有一直使用Firefox 以及Chrome,于是去下载了一个UC ...

  9. vue 之 加载 iframe 的处理

    vue中加载 iframe  会出现跨域问题.以及iframe的高度自适应问题,以下是本人的解决办法: getGoodsContentHtml---- 你的iframe页面的地址,  如不同域的情况下 ...

  10. 12，EasyNetQ-自动订阅

    EasyNetQ自v0.7.1.30附带一个简单的AutoSubscriber. 您可以使用它轻松扫描实现接口IConsume <T>或IConsumeAsync <T>的类的 ...