请点击此处下载代码并用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. hdu1937 二维尺取

    /* 二维上的尺取,外层循环枚举j轴上的可能,内层在i轴上尺取即可 O(N^3) */ #include<iostream> #include<cstdio> #include ...

  2. 2018-2019-2 网络对抗技术 20165333 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165333 Exp4 恶意代码分析 原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或E ...

  3. .NET正则平衡组

    1        概述 平衡组是微软在.NET中提出的一个概念,主要是结合几种正则语法规则,提供对配对出现的嵌套结构的匹配..NET是目前对正则支持最完备.功能最强大的语言平台之一,而平衡组正是其强大 ...

  4. Android使用帧动画内存溢出解决方法

    Android使用帧动画内存溢出解决方法https://blog.csdn.net/daitu_liang/article/details/52336015https://blog.csdn.net/ ...

  5. python的selenium

    from selenium import webdriverChromeDriver="C:\Program Files (x86)\Google\Chrome\Application\ch ...

  6. 支持删除的并查集 hdu2473

    题解: 代码: #include<bits/stdc++.h> using namespace std; #define ll long long ; int fa[maxn],id,vi ...

  7. 初探kafka

    日常中工作中我并没有对kafka接触很多,但了解到很多的框架都和kafka有着紧密的关系.比如rockmetmq是参考了kafka的设计,neflix的缓存组件ehcache是用kafka做数据的同步 ...

  8. mac 回车键、空格键失灵（非物理原因）解决方法

    1.关机2.按住shift+control+option+开关机键,大概10秒左右,观察键盘电源灯是否变色,确定是否硬件故障,不变色表正常.3.先按下开关机键后,放开.然后同时按住option+com ...

  9. poj 1703 - Find them, Catch them【带权并查集】

    <题目链接> 题目大意: 已知所有元素要么属于第一个集合,要么属于第二个集合,给出两种操作.第一种是D a b,表示a,b两个元素不在一个集合里面.第二种操作是A a b,表示询问a,b两 ...

  10. python小工具myqr生成动态二维码

    python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装 命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...