js实现螺旋纹理特效

效果如下

实现代码如下：

<!doctype html>

<html>

<head>

<title>线性渐变动画</title>

<style>

body{

width:100%;

overflow:hidden;

margin:0;

background: hsla(0,0%,0%,1);

}

</style>

</head>

<body>

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实现螺旋纹理特效相关推荐

three.js 实现管道流动特效
three.js 实现管道流动特效想在系统里实现在管道上指示水或液体的流向,在网上查阅了很多资料,也是经历的比较多的麻烦.网上部分代码不可用,还有一部分代码使用定时器实现,流动效果比较卡段这里给大家 ...
php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
js,jquery,css,html5特效
js,jquery,css,html5特效包含js,jquery,css,html5特效,源代码本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
html酷炫电子时钟效果,纯js实现电子时钟特效
这是一款使用纯js实现电子时钟特效.该电子时钟可以显示时间,星期几,以及是上午还是下午.它使用简单,非常容易集成到项目中. 使用方法在页面中引入电子时钟的样式文件main.css. HTML结构该 ...
vue 3 + mo.js 实现点赞粒子特效【实战】
ue 3.2 + js 实现点赞粒子特效创建一个项目一.显示页面 1.新建页面 2.写部分显示代码 3.导入文件 4.将其他的注释掉二.下载点赞图片 1.打开阿里云矢量库 2.复制SVG代码 3 ...
原生JS实现球面展示特效
分享一个由原生JS实现的球面展示效果,效果如下: 实现代码如下: <!DOCTYPE html> <html><head><meta http-equiv=& ...
vue js樱花飘落背景特效
vue js樱花飘落背景特效先上效果图下载js文件:链接或直接保存源码 var stop, staticx; var img = new Image(); img.src = "dat ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...
原生js开灯关灯特效
今天练习js写的开关灯特效老开心了老有成就感了嘻嘻嘻~~~ ps:白色效果不明显,我又改成粉色了 <!DOCTYPE html> <html lang="en&quo ...

js实现螺旋纹理特效

js实现螺旋纹理特效相关推荐

最新文章

热门文章