用Canvas为网页添加动态背景
来源:互联网 发布:java环境变量配置成功 编辑:程序博客网 时间:2024/05/16 02:00
最近刚刚接到为微信公众帐号“玩转三里屯”制作首页的任务。考虑到页面只在手机中浏览,而且手机对canvas的支持又非常好,所以打算使用canvas做点不一样的动画。
首先来看下效果图。
要实现这样的动画普通的CSS3是鞭长莫及了,只能使用Canvas。好在使用canvas也非常简单。
Step1.
新建一个画布(<canvas>)元素,并放在在所有按钮和logo的下方以免遮挡前面的元素。
<canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
将Canvas的宽高设定成其父元素的宽高,以充满他的父元素。也可以直接使用window.innerHeight,window.innerWidth。使其充满整个屏幕。
在画布中画一个充满半个屏幕的矩形。
我们只需要找到矩形的四个定点的坐标,使用Canvas的绘制路径并填充这个路径。四个点分别是:
(0, 画布高度t/2)
(画布宽度, 画布高度t/2)
(画布宽度 画布高度t/2)
(0, 画布高度t/2)
注意:坐标的(0,0)在画布的左上角。
运行代码:
Step3.
让矩形动起来。要做动画我们需要持续的清空画布并重新绘制新的矩形,就像电影每秒播放24张图片。我们新建一个loop函数,用来绘制每一帧的图像,并使用requestAnimFrame来告诉浏览器每一帧都要使用loop来绘制。
//如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeoutwindow.requestAnimFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){ window.setTimeout(callback, 1000 / 60); };})();function loop(){requestAnimFrame(loop);}loop();
把之前绘制矩形的代码放到loop中,并在绘制矩形的代码之前清空画布中所有的图形。
//初始角度为0var 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;
//初始角度为0var 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.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width,canvas.height/2+deltaHeightRight);
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代码就大功告成了。
查看所有代码请去Github
如有问题或者建议请微博@UED天机。我会及时回复
也可以收藏天机的官网,http://ued.sexy/ 经常更新最新的教程。
======
相关阅读
1.css3动态背景
- 用Canvas为网页添加动态背景
- 用Canvas为网页添加动态背景
- 用Canvas为网页添加动态背景
- 为网页添加背景声音和媒体播放器
- 为文件夹添加背景
- 背景添加为图片。
- 为TabBar添加背景
- 网页粒子背景插件 -Canvas-nest.js
- 用canvas标签实现网页H5动态时钟
- canvas鼠标移动动态星空背景特效
- h5 canvas 仿知乎动态粒子背景
- 为UINavigationBar添加自定义背景
- java 为背景添加图片
- 为对话框添加背景位图
- 为UIView添加图片背景
- 如何为应用程序添加背景
- 网页,html5,canvas,js 动态绘制柱形图
- 给网页添加背景的方法
- UIImagePickerController返回的图片可能是旋转的需要用imageOrientation将其矫正
- MSP430 PROFILE功能
- 程序变量命名推荐规范
- Unity手游之路<二>Java版服务端使用protostuff简化protobuf开发
- Xamarin.iOS本地生成验证码
- 用Canvas为网页添加动态背景
- OA系统的价值
- Unity手游之路<三> 基于Unity+Java的聊天室源码
- 放松地方和噶
- nodejs之多进程
- Ubuntu下获取Android源码
- Android自定义控件属性
- Unity手游之路<四>3d旋转-四元数,欧拉角和变幻矩阵
- 《Linux内核设计与实现》读书笔记(六)- 内核数据结构