井井客

搜索

Canvas 螺旋线条动画

不断转动变形的线条动画,点击可以暂停或开始。

Canvas 螺旋线条动画

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

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

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas 螺旋线条动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: cornsilk;
        }

        #c {
            display: block;
            margin: 50px auto;
            margin: calc(50vh - 250px) auto;
        }
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <script>
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");
        var cw = c.width = 500,                                     //设置 Canvas 宽
            cx = cw / 2;
        var ch = c.height = 500,                                    //设置 Canvas 高
            cy = ch / 2;
        var rad = (Math.PI / 180);                                  //1°
        var phi = 0;
        var frames = 0;
        ctx.lineWidth = 1;                                          //线条宽度
        ctx.strokeStyle = "tomato";                                 //线条颜色
        var num_circles = 100;                                      //线条数量
        var angle_incr = 60 * rad;                                  //弧度
        var outer_rad = cx;                                         //Math.sqrt(2*cx*cx);

        function Draw() {
            phi -= .1;                                              //一直都是负数,例如:-0.1,-1.1,-2.1,-3.1
            frames += .1;                                           //一直都是正数,例如:0.1,1.1,2.1,3.1
            var step = 1 * Math.abs(Math.cos(frames * rad)) + .01;  //Math.abs()返回绝对值
            ctx.clearRect(0, 0, cw, ch);                            //清空一个矩形500*500
            ctx.beginPath();                                        //开始路径
            for (var i = num_circles; i >= 0; i -= step) {          //循环改变线条路径坐标
                var ratio = i / num_circles;
                var angle = i * angle_incr;
                var spiral_rad = ratio * outer_rad;
                var x = cx + Math.cos(phi + angle) * spiral_rad;    //余弦 Math.cos(弧度)
                var y = cy + Math.sin(phi + angle) * spiral_rad;    //正玄 Math.sin(弧度)
                ctx.lineTo(x, y);                                   //线条路径坐标
            }
            ctx.stroke();
            requestId = window.requestAnimationFrame(Draw);         //绘制动画
        }

        function start() {                                          //开始动画
            requestId = window.requestAnimationFrame(Draw);
            stopped = false;
        }

        function stopAnim() {                                       //停止动画
            if (requestId) {
                window.cancelAnimationFrame(requestId);
            }
            stopped = true;
        }
        window.addEventListener("load", start(), false);            //window load 后开始动画
        c.addEventListener("click", function() {                    //监听 click 事件,开始或停止 Animation
            (stopped == true) ? start(): stopAnim();
        }, false)
    </script>
</body>
</html>

文章TAG:canvas

作者:井井客整理来源:互联网
本文标题:Canvas 螺旋线条动画
本文链接:http://www.jingjingke.com/c/24295.html

上一篇:Canvas 线性渐变动画
下一篇:Canvas 圆形加载进度动画

文章分类

相关阅读

随便看看