js实现canvas三色线条三维空间旋转动画效果代码-html代码-BFW代码库

js实现canvas三色线条三维空间旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas三色线条三维空间旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        body
        {
        	background: #262626;
        }
        #c
        {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        }
    </style>

</head>

<body><canvas id="c" ></canvas>
    <script>
        // These have to be ordered by size (ascending) for them to be correctly drawn
        var circles = [
        	{ color: '#21a5ad', size: 84, angle: Math.PI / 3 },
        	{ color: '#ffad10', size: 92, angle: - Math.PI / 3 },
        	{ color: '#ef4239', size: 100, angle: 0 }
        ];
        // To be able to "twist a circle", it has to be defined as a set of linked points
        // This is the number of these points (you can see it if you set it to 3 or 4)
        var segmentsPerCircle = 200;
        // Time scaling factor : slower when closer to 0, faster when bigger than 1
        var speed = .8;
        // Easing function on the twist (indicates how fast the rotation goes at a given time)
        // This is equivalent to an ease-in-out-quad
        // A list of basic easings is available here https://gist.github.com/gre/1650294
        function twistEasing(t) {
        	return (t < .5) ? 2 * t * t : 1 - 2 * (t = 1 - t) * t;
        }
        
        var c = document.getElementById('c'),
        	ctx = c.getContext('2d');
        Math.PI2 = 2 * Math.PI; // ˉ\_(ツ)_/ˉ
        
        // "3d" rotation functions, around base axes
 .........完整代码请登录后点击上方下载按钮下载查看