效果如下
 
 
　　
 
实现代码如下：
<!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. Ntrip协议使用流程及服务器实现架构

    Ntrip协议 在RTK接收机中,有多种方式获取到差分数据:电台.挂外串口.网络等.其中网络方式适合在有网络基准站的地区,省掉携带多一台RTK接收机来完成工作. CORS是网络基准站,通过网络收发GP ...

  2. Node.js的mysql执行多表联合查询

    数据库(test)中的表结构(admin.user) //执行多表结合查询 var mysql = require('mysql'); var connection = mysql.createCon ...

  3. [HEOI2012]采花 树状数组 BZOJ 2743

    题目描述 萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...

  4. JS 为任意元素添加任意事件的兼容代码

    为元素绑定事件(DOM):有两种 addEventListener 和 attachEvent:   相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventLi ...

  5. AR资料汇总学习

    ARKit 从入门到精通 http://www.chinaar.com/ARKit/5210.html ARKit 框架的学习 http://blog.csdn.net/biangabiang/art ...

  6. java 实现在线阅读 .pdf

    1.资源的本地地址 2.设置响应头 3.代码实现 @ResponseBody @RequestMapping(value = "/read") @ApiOperation(valu ...

  7. Qt 学习之路 2（71）：线程简介

    Qt 学习之路 2(71):线程简介 豆子 2013年11月18日 Qt 学习之路 2 30条评论 前面我们讨论了有关进程以及进程间通讯的相关问题,现在我们开始讨论线程.事实上,现代的程序中,使用线程 ...

  8. 网络编程之socket(TCP,UDP)

    socket层 tcp协议和udp协议 1)Socket服务器编程 主要包括下面的几步: 1.打开socket 2.绑定到一个地址和端口 3.侦听进来的连接 4.接受连接 5.读写数据 (2)Sock ...

  9. P4449 于神之怒加强版 （莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P4449 给定n,m,k,计算 \(\sum_{i=1}^n \sum_{j=1}^m \mathrm{gc ...

  10. abp框架angular 项目docker 手动部署到Linux环境中

    1.https://aspnetboilerplate.com/Templates 2.后端项目发布,在publish中abp默认已经存在DockerFile文件 3.修改后端文件中的DockerFi ...