欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>动态背景 19.3.4 10:21 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="1024px" height="576px" >
            出现文字表示你的浏览器不支持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;

function init(){
    // init Canvas
    var canvas=document.getElementById('canvas');
    canvas.width=1024;
    canvas.height=576;
    ctx=canvas.getContext('2d');

    // init varialbles
    bg=new Image();
    bg.src="garden.jpg";

    bgOffset=0;
    bgVelocity=10;
};

function update(){

}

function draw(){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    bgOffset+=bgVelocity;
    if(bgOffset>ctx.canvas.width){
        bgOffset=0;
    }

    ctx.drawImage(bg,bgOffset,0,ctx.canvas.width-bgOffset,canvas.height,0,0,ctx.canvas.width-bgOffset,canvas.height);
    ctx.drawImage(bg,0,0,bgOffset,canvas.height,ctx.canvas.width-bgOffset,0,bgOffset,canvas.height);
}

function animate(){
    if(!paused){

        update();
        draw();

        //setTimeout( function(){
            window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
        //}, 0.20 * 1000 );// 延时执行
    }
}
//-->
</script>

2019年3月4日11点02分

[Canvas]动态背景的更多相关文章

  1. 新版qq canvas 动态背景

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  3. 微信小程序分享朋友圈 长海报 canvas 动态高度计算

    业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 g ...

  4. JavaScript之动态背景登陆表单

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. duilib修复ActiveXUI控件bug，以支持flash透明动态背景

    转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...

  6. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  7. 桌面应用开发之WPF动态背景

      因为项目需要,在WPF开发的桌面应用中,登陆页面需使用动态背景.由于没有前端开发人员,所以由半吊子的后端开发人员根据效果图写前端xaml.去掉页面上边框,抽离动态背景设置代码: <Windo ...

  8. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. canvas之背景特效

    需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...

随机推荐

  1. 两次被百度k站两次恢复的亲身经历

    最后,网站被k了并不是最重要的,最重要的是你能不能找到网站被k的病因所在,不知道病因的话,就盲目的优化,恢复起来可能效果就不太明显,也比较浪费时间.只有找到了被k的原因,这样恢复起来才会得心应手,省时 ...

  2. leetcode第一刷_Unique Binary Search Trees

    这道题事实上跟二叉搜索树没有什么关系,给定n个节点,让你求有多少棵二叉树也是全然一样的做法.思想是什么呢,给定一个节点数x.求f(x),f(x)跟什么有关系呢,当然是跟他的左右子树都有关系.所以能够利 ...

  3. .NET开源作业调度框架(Quartz.NET和FluentScheduler)实战项目演练

    一.课程介绍 明人不说暗话,跟着阿笨一起玩NET .本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享 ...

  4. mysql主从同步失败Last_IO_Error: Got fatal error 1236 from master解决方法

    mysql教程主从同步失败Last_IO_Error: Got fatal error 1236 from master解决方法 遇到这样的错误如:“Last_IO_Error: Got fatal ...

  5. Task Parallel Library01,基本用法

    我们知道,每个应用程序就是一个进程,一个进程有多个线程.Task Parallel Library为我们的异步编程.多线程编程提供了强有力的支持,它允许一个主线程运行的同时,另外的一些线程或Task也 ...

  6. C#编程（十九）----------部分类

    部分类 C#中使用关键字partial把类,结构或结构放在多个文件中.一般情况下,一个类全部驻留在单个文件中.但有时候,多个开发人员需要访问同一个类,或者某种类型的代码生成器生成了一个类的某部分,所以 ...

  7. cocos2d-x retain和release倒底怎么玩？

    转载请注明,原文地址: http://blog.csdn.net/musicvs/article/details/8689345 正文: 1. 为什么会有retain? C++和Java不一样,Jav ...

  8. Swift：playground

    在介绍Playground之前,我先罗列一些本人认为有点重要然而零碎的知识点. 1. Swift语法.每句话之后不用加分号.但也能够加分号.但假设写在一行的话.必须加分号. 2. Swift严格要求变 ...

  9. SharePoint PowerShell 批量删除遗弃视图

    前言 最近,给SharePoint升级了,然后发现,有一大批视图不需要了,而且,名字是一样的,想着怎么清理,然后,就想到了powershell. powershell 示例: $siteUrl = & ...

  10. PL/SQL报错：Initialization error Oracle client not properly installed

    安装PL/SQL8.4后,连接数据库 提示错误Initialization error Oracle client not properly installed 解决方案: 1.下载instancec ...