H5酷炫效果
2020-02-18 10:19
302 查看
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>线性渐变动画</title> <style> body{ width:100%; overflow:hidden; margin:0; background: hsla(0,0%,0%,1); } </style> </head> <body> <canvas id="canvas"></canvas> <script> var c = document.getElementById('canvas'), $ = c.getContext('2d'), w = c.width = window.innerWidth, //设置 Canvas 宽度(全屏) h = c.height = window.innerHeight, //设置 Canvas 高度(全屏) t = 0, num = 450, //num = 450 绘制数量 u = 0, _u, //线性渐变的颜色值 s, a, b, x, y, _x, _y, _t = 1 / 100; //控制摆动速度 var anim = function() { $.globalCompositeOperation = 'source-over'; //默认,在目标图像上显示源图像 $.fillStyle = 'hsla(0, 0%, 0%, .75)'; //填充颜色 $.fillRect(0, 0, w, h); //绘制“已填色”的矩形 $.globalCompositeOperation = 'lighter'; //显示源图像 + 目标图像 for (var i = 0; i < 2; i++) { x = 0; _u = (u / 4)+i; $.beginPath(); //循环绘制个数(num),正弦 Math.sin(弧度),余弦 Math.cos(弧度) for (var j = 0; j < num; j++) { x -= .72 * Math.sin(4); y = x * Math.sin(i + 3.0 * t + x / 20) / 2; _x = x * Math.cos(b) - y * Math.sin(b); _y = x * Math.sin(b) + y * Math.cos(b); b = (j * 3) * Math.PI / 6.8; $.lineWidth = .18; //线条宽度 $.arc(w / 2 - _x, h / 2 -_y, .5, 0, 2 * Math.PI); //画圆(半径0.5) } //设置线性渐变 var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y, 0, w / 2 + _x, h / 2 + _y); g.addColorStop(0.0, 'hsla('+ u +',85%,50%,1)'); g.addColorStop(0.5, 'hsla('+ _u +',85%,40%,1)'); g.addColorStop(1, 'hsla(0,0%,5%,1)'); $.strokeStyle = g; //线条颜色为 g(线性渐变) $.stroke(); } t += _t; //摆动速度会不断增加 u -= .2; //改变颜色值 window.requestAnimationFrame(anim); //绘制动画 anim }; anim(); //监听,当浏览器宽度和高度改变时,改变 Canvas 的宽度和高度 window.addEventListener('resize', function() { c.width = w = window.innerWidth; c.height = h = window.innerHeight; }, false); </script> </body> </html>
静态效果图如下(没做flash)要看实际效果直接复制代码就行
转载于:https://my.oschina.net/strip/blog/1252439
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- elastic search5.6.3学习笔记(一)
- html5实现DisuzX论坛手机版ucenter头像修改
- 初步了解HTML5
- H5基础阶段一
- H5基础阶段二(表格、表单)
- H5基础阶段四(各种属性)
- H5布局阶段一(display)
- H5布局阶段二(盒模型)
- H5布局阶段三(浮动)
- html5学习笔记一
- CDH5.x配置spark错误解决
- HTML5+CSS3
- [网页设计]10个最常见的 HTML5 面试题及答案
- HTML5遵循的5个设计原则
- 关于html5新增的功能(百度)
- 关于使用HTML5提供的indexedDB的一下心得
- HTML5 SVG
- HTML5 基础知识,第 1 部分
- HTML5 保留列表相关元素
- H5的第一天