用HTML5 Canvas为网页添加动态波浪背景

查看所有代码请去Github

本文出自 “UED” 博客:http://5344794.blog.51cto.com/5334794/1430877

<!DOCTYPE html>

<html>

<head>

    <title>三里屯SOHO商盟</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <meta name="apple-mobile-web-app-title" content=""/>

    <meta name="apple-touch-fullscreen" content="YES" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="format-detection" content="telephone=no" />

    <meta name="HandheldFriendly" content="true" />

    <meta http-equiv="x-rim-auto-match" content="none" />

    <meta name="format-detection" content="telephone=no" />

    <!-- This is to force IE into the latest version mode, overriding 'compatibility' mode which breaks everything. -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="" />

    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="" />

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="" />

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="" />

    <link href="assets/css/reset.css" rel="stylesheet" type="text/css">

    <link href="assets/css/base.css" rel="stylesheet" type="text/css">

    <!--feature-->

    <link href="assets/css/index.css" rel="stylesheet" type="text/css">

    <style type="text/css">

    </style>

</head>

<body>

    <section class="doc doc--bg2" style="width: 400px;height: 400px;margin: 0 auto;border-radius: 400px;position: relative;border:1px#efefef solid;overflow: hidden;">

        <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>

    </section>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas');

        var ctx = canvas.getContext('2d');

        canvas.width = canvas.parentNode.offsetWidth;

        canvas.height = canvas.parentNode.offsetHeight;

        //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout

        window.requestAnimFrame = (function(){

        return  window.requestAnimationFrame       ||

                window.webkitRequestAnimationFrame ||

                window.mozRequestAnimationFrame    ||

                function( callback ){

                  window.setTimeout(callback, 1000 / 60);

                };

        })();

        //初始角度为0

        var step = 0;

        //定义三条不同波浪的颜色

        var lines = ["rgba(0,222,255, 0.2)",

                       "rgba(157,192,249, 0.2)",

                       "rgba(0,168,255, 0.2)"];

        function loop(){

            ctx.clearRect(0,0,canvas.width,canvas.height);

            step++;

            //画3个不同颜色的矩形

            for(var j = lines.length - 1; j >= 0; j--) {

                ctx.fillStyle = lines[j];

                //每个矩形的角度都不同，每个之间相差45度

                var angle = (step+j*45)*Math.PI/180;

                var deltaHeight   = Math.sin(angle) * 50;

                var deltaHeightRight   = Math.cos(angle) * 50;

                ctx.beginPath();

                ctx.moveTo(0, canvas.height/2+deltaHeight);

                ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);

                ctx.lineTo(canvas.width, canvas.height);

                ctx.lineTo(0, canvas.height);

                ctx.lineTo(0, canvas.height/2+deltaHeight);

                ctx.closePath();

                ctx.fill();

            }

            requestAnimFrame(loop);

        }

        loop();

    </script>

</body>

</html>

首先来看下效果图。

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。

Step1.

新建一个画布（<canvas>)元素，并放在在所有按钮和logo的下方以免遮挡前面的元素。

1	`<canvas` `id="canvas"` `style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>`

将Canvas的宽高设定成其父元素的宽高，以充满他的父元素。也可以直接使用window.innerHeight,window.innerWidth。使其充满整个屏幕。

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

canvas.width = canvas.parentNode.offsetWidth;

canvas.height = canvas.parentNode.offsetHeight;

Step2.

在画布中画一个充满半个屏幕的矩形。

我们只需要找到矩形的四个定点的坐标，使用Canvas的绘制路径并填充这个路径。四个点分别是：

(0, 画布高度t/2)
(画布宽度, 画布高度t/2)
(画布宽度画布高度t/2)
(0, 画布高度t/2)

注意：坐标的（0，0）在画布的左上角。

//填充颜色

ctx.fillStyle = "rgba(0,222,255, 0.2)";

//开始绘制路径

ctx.beginPath();

//左上角

ctx.moveTo(0, canvas.height/2);

//右上角

ctx.lineTo(canvas.width, canvas.height/2);

//右下角

ctx.lineTo(canvas.width, canvas.height);

//左下角

ctx.lineTo(0, canvas.height);

//左上角

ctx.lineTo(0, canvas.height/2);

//闭合路径

ctx.closePath();

//填充路径

ctx.fill();

运行代码：

Step3.

让矩形动起来。要做动画我们需要持续的清空画布并重新绘制新的矩形，就像电影每秒播放24张图片。我们新建一个loop函数，用来绘制每一帧的图像，并使用requestAnimFrame来告诉浏览器每一帧都要使用loop来绘制。

//如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout

window.requestAnimFrame = (function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ){

window.setTimeout(callback, 1000 / 60);

};

})();

function loop(){

requestAnimFrame(loop);

}

loop();

把之前绘制矩形的代码放到loop中，并在绘制矩形的代码之前清空画布中所有的图形。

function loop(){

//清空canvas

ctx.clearRect(0,0,canvas.width,canvas.height);

//绘制矩形

ctx.fillStyle = "rgba(0,222,255, 0.2)";

ctx.beginPath();

ctx.moveTo(0, canvas.height/2);

ctx.lineTo(canvas.width, canvas.height/2);

ctx.lineTo(canvas.width, canvas.height);

ctx.lineTo(0, canvas.height);

ctx.lineTo(0, canvas.height/2);

ctx.closePath();

ctx.fill();

requestAnimFrame(loop);

}

接下来我们更改每一帧中的矩形的高度来模拟波浪的形态，波浪其实是在波峰与波谷之间做周期性运动。我们假设波峰与波谷间都是50px，那么矩形的高度的变化值应该在-50px到50px之间。为了达到周期性的效果我们采用正弦函数sin(x)，因为不管x值怎么变化sin(x)的值始终在-1与1之间。我们新建一个变量 var step =0 使其在每一帧中自增，表示每一帧角度增加一度，并用Math.sin()取他的正弦值。JS中的sin使用的弧度值，我们需要把step转换成弧度值,var angle = step*Math.PI/180; 取角度的正弦值乘以50得到了矩形高度的变化量。将变化量加在矩形的左上与右上两个顶点的y坐标上。

//初始角度为0

var step = 0;

function loop(){

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.fillStyle = "rgba(0,222,255, 0.2)";

//角度增加一度

step++;

//角度转换成弧度

var angle = step*Math.PI/180;

//矩形高度的变化量

var deltaHeight = Math.sin(angle) * 50;

ctx.beginPath();

//在矩形的左上与右上两个顶点加上高度变化量

ctx.moveTo(0, canvas.height/2+deltaHeight);

ctx.lineTo(canvas.width, canvas.height/2+deltaHeight);

ctx.lineTo(canvas.width, canvas.height);

ctx.lineTo(0, canvas.height);

ctx.lineTo(0, canvas.height/2+deltaHeight);

ctx.closePath();

ctx.fill();

requestAnimFrame(loop);

}

运行代码：

将右上顶点的变化值改为角度的余弦，使其左右不同步。var deltaHeightRight = Math.cos(angle) * 50;

//初始角度为0

var step = 0;

function loop(){

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.fillStyle = "rgba(0,222,255, 0.2)";

//角度增加一度

step++;

//角度转换成弧度

var angle = step*Math.PI/180;

//矩形高度的变化量

var deltaHeight = Math.sin(angle) * 50;

//矩形高度的变化量(右上顶点)

var deltaHeightRight = Math.cos(angle) * 50;

ctx.beginPath();

ctx.moveTo(0, canvas.height/2+deltaHeight);

//右上顶点

ctx.lineTo(canvas.width, canvas.height/2+deltaHeightRight);

ctx.lineTo(canvas.width, canvas.height);

ctx.lineTo(0, canvas.height);

ctx.lineTo(0, canvas.height/2+deltaHeight);

ctx.closePath();

ctx.fill();

requestAnimFrame(loop);

}

运行代码：

Step4

将矩形的顶上的边变成曲线。

在上面的代码中我们用lineTo来绘制矩形的边，为了要绘制曲线我们需要

bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)

函数。绘制的起点是矩形的左上顶点，结束点为右上顶点。bezierCurveTo函数的参数中(cpX1,cpY1)与(cpX2,cpY2)分别是起点与结束点的控制点，(x,y)为结束点。我们将两个控制点的x值设定在画布的正中心，y值在起始点与终点的y值上面减去50;(canvas.width /2, canvas.height/2+deltaHeight-50),(canvas.width / 2,canvas.height/2+deltaHeightRight-50)，可以根据效果调整。

ctx.beginPath();

ctx.moveTo(0, canvas.height/2+deltaHeight);

//ctx.lineTo(canvas.width, canvas.height/2+deltaHeightRight);

//画曲线

ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);

ctx.lineTo(canvas.width, canvas.height);

ctx.lineTo(0, canvas.height);

ctx.lineTo(0, canvas.height/2+deltaHeight);

ctx.closePath();

运行代码：

Step5

一个波浪画好了。我们只需要同时画3个不同颜色的波浪，并且使不同波浪的角度不同就可以得到效果图中的效果了。

//定义三条不同波浪的颜色

var lines = ["rgba(0,222,255, 0.2)",

"rgba(157,192,249, 0.2)",

"rgba(0,168,255, 0.2)"];

function loop(){

ctx.clearRect(0,0,canvas.width,canvas.height);

step++;

//画3个不同颜色的矩形

for(var j = lines.length - 1; j >= 0; j--) {

ctx.fillStyle = lines[j];

//每个矩形的角度都不同，每个之间相差45度

var angle = (step+j*45)*Math.PI/180;

var deltaHeight = Math.sin(angle) * 50;

var deltaHeightRight = Math.cos(angle) * 50;

ctx.beginPath();

ctx.moveTo(0, canvas.height/2+deltaHeight);

ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);

ctx.lineTo(canvas.width, canvas.height);

ctx.lineTo(0, canvas.height);

ctx.lineTo(0, canvas.height/2+deltaHeight);

ctx.closePath();

ctx.fill();

}

requestAnimFrame(loop);

}

运行代码：

Step6

添加好按钮与logo的HTML代码就大功告成了。

用HTML5 Canvas为网页添加动态波浪背景的更多相关文章

HTML5 Canvas 为网页添加文字水印
<!DOCTYPE html> <html> <body> <canvas id=" style="border:1px solid #d ...
基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
HTML5 Canvas 获取网页的像素值。
我之前在网上看过一个插件叫做出JScolor 颜色拾取器说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值. 自从HTML5 画布出来之后.就有更好的方法来 ...
基于HTML5 Canvas 点击添加 2D 3D 机柜模型
今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考.这个例子看起来很简单,实际上结合了数据模型中非常重要的三个事件处理的部分:属性变化事 ...
HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
基于html5 canvas和js实现的水果忍者网页版
今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...
Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客
Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼
asp.net动态为网页添加关键词的代码
如下资料是关于asp.net动态为网页添加关键词的代码,希望能对小伙伴们有较大用.HtmlMeta keywords = new HtmlMeta();keywords.Name = "ke ...
ASP.NET中Literal控件的使用方法（用于向网页中动态添加内容）
原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就 ...

随机推荐

Lua require搜索路径指定方法
在自己的lua文件中,如果使用到了自己写的C库或者第三方库,想让lua编译到自己指定的目录下寻找*.lua或*.so文件的时候,可以再自己的Lua代码中添加如下代码,可以指定require搜索的路径. ...
树链剖分 - BZOJ 1036: [ZJOI2008]树的统计Count
这是树链剖分的入门题,也是我学树链剖分的第一题. 树链剖分:就是把树中和线段树联系起来,求(u,v)路径中权值的最大值和其路径的权值和. 入门blog:http://blog.sina.com.cn/ ...
git shell 中文
alias ls="ls --show-control-chars" alias ll="ls -l"
Sqli-labs less 49
Less-49 本关与47关基本类似,区别在于没有错误回显,所以我们可以通过延时注入和导入文件进行注入. 利用延时注入 http://127.0.0.1/sqli-labs/Less-49/?sort ...
常见的NoSql系统使用场景分析--转载
•Cassandra •特性:分布式与复制的权衡\根据列和键范围进行查询\BigTable类似的功能:列,列族\写比读快很多 •最佳适用:写操作较多,读比较少的时候.如果你的系统都是基于Java的时候 ...
UITableView多选删除
设置一个在编辑状态下点击可改变图片的cell FileItemTableCell.h #import <UIKit/UIKit.h> @interface FileItemTableCel ...
AsyncTask和Handler对比
AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操 ...
Leetcode: strStr()
Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...
ubuntu下安装nodejs
前言继前几天在wins环境下使用cygwin模拟器安装nodejs出现了一些问题后,今天我决定在ubuntu下安装nodejs,安装过程非常顺利,没有报错,看来还是linux环境给力啊,由于刚接触l ...
JUC回顾之-ThreadPoolExecutor的原理和使用
Spring中的ThreadPoolTaskExecutor是借助于JDK并发包中的java.util.concurrent.ThreadPoolExecutor来实现的.基于ThreadPoolEx ...

用HTML5 Canvas为网页添加动态波浪背景

用HTML5 Canvas为网页添加动态波浪背景的更多相关文章

随机推荐

热门专题