CANVAS 垂挂的点线旋转动画

#Codevember 1 Canvas rotating dots

CANVAS

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3443
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Experience = function() {
    function Experience(container) {
        _classCallCheck(this, Experience);

console.clear();

this.canvas = document.createElement('canvas');
        container.appendChild(this.canvas);
        this.context = this.canvas.getContext('2d');

var fps = 60;
        this.fpsInterval = 1000 / fps;
        this.then = Date.now();

// Play with these values
        this.startColor = {
            'r': 46,
            'g': 204,
            'b': 113
        };
        this.endColor = {
            'r': 41,
            'g': 128,
            'b': 185
        };
        this.dotsNumber = 15;
        this.dotsRadius = 10;
        this.speed = 0.03;

this.startPosition = {
            'x': 0,
            'y': 50
        };

this.counter = 0;

this.resize();
        this.bind();
        this.loop();
    }

Experience.prototype.bind = function bind() {
        window.addEventListener('resize', this.resize.bind(this), false);
    };

Experience.prototype.render = function render() {
        for (var i = 0; i < this.dotsNumber; i++) {
            this.context.beginPath();
            this.context.moveTo(this.startPosition.x, this.startPosition.y);
            this.context.lineTo(this.startPosition.x + Math.cos(this.counter * (this.dotsNumber - i)) * 10 * i, this.startPosition.y + 30 * i);
            this.context.lineWidth = 1;
            this.context.strokeStyle = makeGradientColor(this.startColor, this.endColor, i / this.dotsNumber * 100).cssColor;
            this.context.stroke();
            this.context.closePath();
        }

for (var i = 0; i < this.dotsNumber; i++) {
            this.context.beginPath();
            this.context.arc(this.startPosition.x + Math.cos(this.counter * (this.dotsNumber - i)) * 10 * i, this.startPosition.y + 30 * i, this.dotsRadius, 0, Math.PI * 2, true);
            this.context.fillStyle = makeGradientColor(this.startColor, this.endColor, i / this.dotsNumber * 100).cssColor;
            this.context.fill();
            this.context.closePath();
        }

this.counter += this.speed;
    };

Experience.prototype.loop = function loop() {
        this.raf = window.requestAnimationFrame(this.loop.bind(this));

var now = Date.now();
        var delta = now - this.then;

if (delta > this.fpsInterval) {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.render();
            this.then = now;
        }
    };

Experience.prototype.resize = function resize() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.center = {
            'x': this.canvas.width / 2,
            'y': this.canvas.height / 2
        };

this.reset();
    };

Experience.prototype.reset = function reset() {
        window.cancelAnimationFrame(this.raf);
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.startPosition.x = this.center.x;
        this.loop();
    };

return Experience;
}();

var getRandomColor = function getRandomColor() {
    var value = Math.floor(Math.random() * 255);
    return '#' + value.toString(16) + value.toString(16) + value.toString(16);
};

var makeGradientColor = function makeGradientColor(color1, color2, percent) {
    var newColor = {};

var makeChannel = function makeChannel(a, b) {
        return a + Math.round((b - a) * (percent / 100));
    };

var makeColorPiece = function makeColorPiece(num) {
        num = Math.min(num, 255); // not more than 255
        num = Math.max(num, 0); // not less than 0
        var str = num.toString(16);
        if (str.length < 2) {
            str = "0" + str;
        }
        return str;
    };

newColor.r = makeChannel(color1.r, color2.r);
    newColor.g = makeChannel(color1.g, color2.g);
    newColor.b = makeChannel(color1.b, color2.b);
    newColor.cssColor = "#" + makeColorPiece(newColor.r) + makeColorPiece(newColor.g) + makeColorPiece(newColor.b);
    return newColor;
};

var container = document.getElementById('canvas');
var experience = new Experience(container);

编译

CSS

HTML

#Codevember 1 Canvas rotating dots

CANVAS

编辑器支持Emmet

快捷键

#Codevember 1 Canvas rotating dots

CANVAS

CANVAS 酷炫的点线网状动画

CANVAS 五光十色的旋转方块动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：