井井客

搜索

Canvas 线性渐变动画

代码少但是效果很炫~

Canvas 线性渐变动画

原文摘自:http://canvas.migong.org/category/canvas-animation/page/15

代码如下,建议可以看一下原文,里面有解释更多。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas 线性渐变动画</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>

文章TAG:canvas

作者:井井客整理来源:互联网
本文标题:Canvas 线性渐变动画
本文链接:http://www.jingjingke.com/c/24294.html

上一篇:Canvas 液体波浪动画
下一篇:Canvas 螺旋线条动画

文章分类

相关阅读

随便看看