请点击此处下载代码并用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. PHP中的一些常用函数

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...

  2. noip 2017 时间复杂度

    自认为是少有的复杂的代码 这题思想很简单,就是大模拟 对于for循环,一行读入4个字符串,然后分类讨论: ①:如果是一个正常的O(n),那么累计n的指数加1 ②:如果是一个常数级别的,那么继续循环,但 ...

  3. 【APUE | 7】命令形参、函数

    命令形参 命令行参数是使用main()函数参数来处理的,其中,argc是指传入参数的个数,argv[]是一个指针数组,指向传递给程序的每个参数. 应当指出的是, argv[0]存储程序的名称,argv ...

  4. 这篇文章讲得精彩-深入理解 Python 异步编程(上)！

    可惜,二和三现在还没有出来~ ~~~~~~~~~~~~~~~~~~~~~~~~~ http://python.jobbole.com/88291/ ~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. Codeforces 449C Jzzhu and Apples 贪心 (看题解）

    Jzzhu and Apples 从大的质因子开始贪心, 如果有偶数个则直接组合, 如果是奇数个留下那个质数的两倍, 其余两两组合. #include<bits/stdc++.h> #de ...

  6. Nordic Collegiate Programming Contest NCPC 2017-Problem G Galactic Collegiate Programming Contest

    题目大意:有n( n<1e5 )只队伍参加程序竞赛,然后给m个信息,每个信息告诉你第p 个队伍过了一题,并且告诉你罚时是多少,让你输入每个信息之后,第一个队伍的 排名. 思路:一眼看过去就像数据 ...

  7. 利用IntelliJ IDEA 创建第一个项目

    1.创建项目 打开后点击第一个按钮

  8. python tkinter-按钮.标签.文本框、输入框

    按钮 无功能按钮 Button的text属性显示按钮上的文本 tkinter.Button(form, text='hello button').pack() 无论怎么变幻窗体大小,永远都在窗体的最上 ...

  9. Nodejs学习之mongodb Error: failed to connect to [localhost:27017]

    在连接mongodb时出现以下错误提示信息 events.js: throw er; // Unhandled 'error' event ^ Error: failed to connect to ...

  10. scss、less 对浏览器兼容的处理方法, css 的单行溢出、多行溢出

    1. scss @mixin rounded($param1,$param2) {    #{$param1}:$param2;    -webkit-#{$param1}: $param2;     ...