canvas 水波纹
2024-10-18 18:26:15
<!DOCTYPE html>
<html>
<head>
<title>水波背景</title>
<meta charset="gb2312" />
<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>
最新文章
- C#多态“说来也说”——逻辑层BLL中的多态使用
- Unity UGUI知识点
- C 标准库系列之概述
- MFC打开系统关于对话框
- 传智博客.NET培训第13季 Ajax教程(共十三季) 学习资源
- CreateFeatureClass COM异常
- 【HDOJ】1448 The Treasure
- 连接oracle数据库出现:ORA-12505,TNS:listener does not currently know of SID given in connect descriptor
- ASP.net+SQL server2008简单的数据库增删改查 VS2012
- zoj2588 Burning Bridges --- 寻求尖端
- iOS9网络适配
- Elasticsearch从入门到精通之Elasticsearch集群内的原理
- Mybatis Generator代码自动生成(实体类、dao层、映射文件)
- (转载)python: getopt的使用;
- SharePoint 2016 vs部署报错:无法加载功能xxx未能加载文件或程序集xxx或它的某一个依赖项。系统找不到指定的文件
- 《算法竞赛入门经典》刘汝佳 C语言部分(前四章)“注解与习题” 之思索 -<;1>;
- JVM总结-invokedynamic
- vue-scroller记录滚动位置
- Asp.Net 获取物理路径
- Web程序中的懒加载异常说明及解决方案
热门文章
- Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
- Complex类的实现
- encode和decode区别
- HDU 1520 树形DP入门
- OpenGL——外部读档+异常报错
- 关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲
- 按Enter登录,Esc退出
- 信步漫谈之Git&mdash;环境搭建及入门
- 5.1JAVA基础复习——JAVA中的静态代码块、构造代码块、构造函数、局部代码块区别
- TeamCity安装