1<!doctype html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <title>线性渐变动画</title> 6 <style> 7 body{ 8 width:100%; 9 overflow:hidden; 10 margin:0; 11 background: hsla(0,0%,0%,1); 12 } 13 </style> 14</head> 15<body> 16 <canvas id="canvas"></canvas> 17 <script> 18 var c = document.getElementById('canvas'), 19 $ = c.getContext('2d'), 20 w = c.width = window.innerWidth, //设置 Canvas 宽度（全屏） 21 h = c.height = window.innerHeight, //设置 Canvas 高度（全屏） 22 t = 0, num = 450, //num = 450 绘制数量 23 u = 0, _u, //线性渐变的颜色值 24 s, a, b, 25 x, y, _x, _y, 26 _t = 1 / 100; 27 //控制摆动速度 28 29 var anim = function() { 30 $.globalCompositeOperation = 'source-over'; //默认，在目标图像上显示源图像 31 $.fillStyle = 'hsla(0, 0%, 0%, .75)'; //填充颜色 32 $.fillRect(0, 0, w, h); //绘制“已填色”的矩形 33 $.globalCompositeOperation = 'lighter'; //显示源图像 + 目标图像 34 for (var i = 0; i < 2; i++) { 35 x = 0; _u = (u / 4)+i; 36 $.beginPath(); 37 //循环绘制个数（num），正弦 Math.sin(弧度)，余弦 Math.cos(弧度) 38 for (var j = 0; j < num; j++) { 39 x -= .72 * Math.sin(4); 40 y = x * Math.sin(i + 3.0 * t + x / 20) / 2; 41 _x = x * Math.cos(b) - y * Math.sin(b); 42 _y = x * Math.sin(b) + y * Math.cos(b); 43 b = (j * 3) * Math.PI / 6.8; 44 $.lineWidth = .18; //线条宽度 45 $.arc(w / 2 - _x, h / 2 -_y, .5, 0, 2 * Math.PI); //画圆（半径0.5） 46 } 47 48 //设置线性渐变 49 var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y, 0, w / 2 + _x, h / 2 + _y); 50 g.addColorStop(0.0, 'hsla('+ u +',85%,50%,1)'); 51 g.addColorStop(0.5, 'hsla('+ _u +',85%,40%,1)'); 52 g.addColorStop(1, 'hsla(0,0%,5%,1)'); 53 $.strokeStyle = g; //线条颜色为 g（线性渐变） 54 $.stroke(); 55 } 56 t += _t; //摆动速度会不断增加 57 u -= .2; //改变颜色值 58 window.requestAnimationFrame(anim); //绘制动画 anim 59 }; 60 anim(); 61 62 //监听，当浏览器宽度和高度改变时，改变 Canvas 的宽度和高度 63 window.addEventListener('resize', function() { 64 c.width = w = window.innerWidth; 65 c.height = h = window.innerHeight; 66 }, false); 67 </script> 68</body> 69</html>
静态效果图如下（没做flash）要看实际效果直接复制代码就行
