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

最新文章

热门文章