效果如下
 
 
　　
 
实现代码如下：
<!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. 修复win10无法双击打开txt文档.reg

    Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\.txt]@="txtfile""Content Type& ...

  2. 多线程 GCD 的使用

    参考:http://www.jianshu.com/p/2d57c72016c6 GCD 的两个核心概念: 队列 与 任务 一.队列 队列分为串行队列和并发队列, 队列的作用是管理开发者提交的任务,在 ...

  3. Android 日历视图(Calendarview)

    1.介绍 2.常用属性 3.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  4. Mysql相关操作：

    允许root用户远程访问:https://www.cnblogs.com/davidgu/p/3706663.html; 用户的添加删除管理: https://www.cnblogs.com/hzd2 ...

  5. P3704 [SDOI2017]数字表格 （莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P3704 [题解] https://www.luogu.org/blog/cjyyb/solution-p3 ...

  6. JSTL的核心标签

    JSTL的核心标签: .if: 语法:<c:if test="" var="" scope=""></c:if> 当 ...

  7. UESTC - 1357 前缀和维护

    有点小细节需要注意 sum实时维护有效的连续和 /*H E A D*/ ll dp1[maxn],dp2[maxn]; ll a[maxn],n,sum; int main(){ while(~iin ...

  8. SQL 每行随机产生数字

    Id,Amount) from Customer

  9. vim（一） vim与markdown

    vim markdown 配置 vim高亮显示Markdown语法 在.vimrc添加 Plugin 'godlygeek/tabular' Plugin 'plasticboy/vim-markdo ...

  10. 【网络】EIGRP负载均衡、手工汇总、泄露明细、安全认证

    基于6.6.6.6/24访问13.1.1.1/24进行负载均衡实例图 一.等价负载均衡 等价负载均衡前,R5路由器背后的6.6.6.6/24访问R1的13.1.1.1/24, 从15.1.1.0/24 ...