CANVAS 水波动态背景
2016-04-11 17:39
162 查看
参考:https://github.com/cyclegtx/wave_background
做的水波背景,以后可能会用到哈!
效果如下:
代码如下:
做的水波背景,以后可能会用到哈!
效果如下:
代码如下:
<!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset="utf-8" /> <style> html, body {width:100%; height:100%; padding:0; margin:0;} </style> </head> <body> <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas> <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); }; })(); // 波浪大小 var boHeight = canvas.height / 10; var posHeight = canvas.height / 1.2; //初始角度为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*50)*Math.PI/180; var deltaHeight = Math.sin(angle) * boHeight; var deltaHeightRight = Math.cos(angle) * boHeight; ctx.beginPath(); ctx.moveTo(0, posHeight+deltaHeight); ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight); ctx.lineTo(canvas.width, canvas.height); ctx.lineTo(0, canvas.height); ctx.lineTo(0, posHeight+deltaHeight); ctx.closePath(); ctx.fill(); } requestAnimFrame(loop); } loop(); </script> </body> </html>
相关文章推荐
- LeetCode - Two Sum
- Android开发--组件详细介绍TextView
- flex学习进度2
- Lnmp环境安装
- Android_AutoLayout全新适配方式原理分析
- c++快速简易入门教程_005this指针
- unity中用BMfont制作自定义美术中文字体
- iOS 轮播图切换时边缘出现白色的原因
- 【IOS工具帖】Xcode快捷键大全(附带代码自动排版)
- linux下执行.sh文件
- JVM系列一:JVM内存组成及分配
- 为了明天加油
- Android中复制及粘贴功能
- Leetcode_86_Partition List
- Java 内存溢出(java.lang.OutOfMemoryError)的常见情况和处理方式总结
- 【HDU】 1028 Ignatius and the Princess III
- c++快速简易入门教程_004函数的重载
- c++快速简易入门教程_003析构函数
- matlab 计算程序运行的时间
- RecyclerView+SwipeRefreshLayout实现下拉刷新列表