效果如下
 
 
　　
 
实现代码如下：
<!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. 18.阻止默认操作e.preventDefault();防止冒泡事件：e.stopPropagation()

      一.加了e.preventDefault();会阻止a标签默认的点击跳转效果 <!DOCTYPE html> <html lang="en"> < ...

  2. Math.random取随机整数

    Math.random可以随机获取0-1的数字,今天用的需要给id随机赋值,小数不好控制,就只取整. 网上很多是 int i=(int)(Math.random()*100): 报错: 后找到 var ...

  3. Maven学习笔记（一）—— Maven基础

    一.Maven介绍 1.1 什么是maven? Maven是apache下的一个纯Java开发的开源项目,它是一个项目管理工具,使用maven对Java项目进行构建.依赖管理. 1.2 什么是项目构建 ...

  4. 那些熟悉又陌生的 css2、css3 样式，持续复习

    initial关键字:    除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. initial ...

  5. JOB&paper

    我突然想到,不管我最终有没有获得一份可观的工作,但是每个公司都最终会收到我的一份简历 (3)熟悉面向对象编程: (4)熟悉TCP/IP, Http等网络协议和网络编程:   2.熟练掌握MFC.STL ...

  6. Q686 重复叠加字符串匹配

    给定两个字符串 A 和 B, 寻找重复叠加字符串A的最小次数,使得字符串B成为叠加后的字符串A的子串,如果不存在则返回 -1. 举个例子,A = "abcd",B = " ...

  7. 豆瓣模拟登录（双层html）

    一.豆瓣模拟登录(双层html) #!/usr/bin/env python # -*- coding: utf-8 -*- #author tom import time from selenium ...

  8. git 代码统计

    查看git上的个人代码提交量: git log --author="Marek Romanowski" --since="2019-01-01" --no-me ...

  9. Python+Selenium定位元素的方法

    Python+Selenium有以下八种定位元素的方法: 1. find_element_by_id() eg: find_element_by_id("kw") 2. find_ ...

  10. Oracle RAC集群搭建(六)--ASM创建oradata的磁盘组

    一,查看实例环境 su - grid env|grep ORA 发现连接空实例 改环境 到这里检测就完成了 二,配置安装 grid 用户输入asmca ASM数据盘就创建好了