效果如下
 
 
　　
 
实现代码如下：
<!doctype html>
<html>
<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>
 
 
本博客转载于:

因为我试了,觉得听炫酷的,才写到这的!

js实现螺旋纹理特效的更多相关文章

  1. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  2. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  3. WebGL three.js学习笔记 纹理贴图模拟太阳系运转

    纹理贴图的应用以及实现一个太阳系的自转公转 点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理 纹理 ...

  4. 一款基础模型的JS打飞机游戏特效代码

    <!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...

  5. JS网站图集相册特效

    JS网站图集相册特效是一款可以直接使用鼠标进行前后导航,也可以通过缩略图来切换图片. 在线演示本地下载

  6. Three.js使用局部纹理更新

    THREE.js开发的应用运行在iphone5下发现有些时候会崩溃,跟了几天发现是因为Sprite太多频繁更新纹理占用显存导致的.通常解决纹理频繁更新问题就要用到one draw all方法,放到纹理 ...

  7. 使用 JS 输出螺旋矩阵

    关于螺旋矩阵 这是我曾经遇到过的面试题,在 LeetCode 上找到了题目的原型,难度中等.题目描述如下: 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中 ...

  8. js实现下雪雪花特效

    两种下雪特效: 1. <script type="text/javascript"> (function($){ $.fn.snow = function(option ...

  9. three.js学习：纹理Texture之平面纹理

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. org.apache.storm.utils.NimbusLeaderNotFoundException: could not find leader nimbus from seed hosts["datanode9"]. Did you specify a valid of nimbus hosts for config nimbus.seeds?

    出现这个异常的原因主要是zookeeper没有正常工作引起的.可以在storm-conf-storm.yaml中设置 storm.zookeeper.servers: -"zookeeper ...

  2. SQL Server为啥使用了这么多内存？

    原文地址:http://support.microsoft.com/gp/anxin_techtip6/zh-cn SQL Server为啥使用了这么多内存? SQL Server的用户,常常会发现S ...

  3. 洛谷 P3616 富金森林公园题解（树状数组）

    P3616 富金森林公园 题目描述 博艾的富金森林公园里有一个长长的富金山脉,山脉是由一块块巨石并列构成的,编号从1到N.每一个巨石有一个海拔高度.而这个山脉又在一个盆地中,盆地里可能会积水,积水也有 ...

  4. KD树的极简单笔记(待后续更新)

    今天(18.5.4)室友A突然问我算法怎么入门,兴奋之下给他安利了邓公的<数据结构>,然而他接着又问我能不能两周内快速入门,毕竟打算搞Machine Learning,然后掏出手机看了下他 ...

  5. Spring property文件配置方法以及如何与工程分离

    1,Spring使用property文件作为配置源    工程中难免出现一些需要每次部署都需要配置的参数,如数据源连接参数等,测试环境跟实际运行环境是不一样的.    使用spring框架的话,这些参 ...

  6. hdu-1702-栈和队列

    ACboy needs your help again! Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  7. 二分函数 lower_bound()

    这篇博客说是STL源码.... https://www.cnblogs.com/cobbliu/archive/2012/05/21/2512249.html 头文件 algorithm 1.lowe ...

  8. nginx 地址重写

    例如, www.baidu.com    跳到   www.baidu.com/index.html #if ( $http_host ~* "^(.*)\.baidu\.com$" ...

  9. 红米note_维修_开机键

    1. 2.在线人工客服(20180919) 很荣幸为您服务,有什么问题可以帮助到您的- 我的手机 后边的 开机键 貌似 不太行了 您好,您是哪款手机 就是 要按 好几次 很用力 才能 开亮手机屏幕木 ...

  10. java se系列（三） 顺序语句、if...else、switch、While、do-while、for、break、continue

    1 顺序语句 语句:使用分号分隔的代码称作为一个语句. 注意:没有写任何代码只是一个分号的时候,也是一条语句,称作空语句. 顺序语句就是按照从上往下的顺序执行的语句. 2 判断(if…else) 什么 ...