Canvas 散落的彩带

Coloured ribbon。点击屏幕触发动效。

ribbon

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var util = {
    random: function(minOrMax, max) {
        if (arguments.length === 1) {
            return minOrMax * Math.random();
        }

return minOrMax + (Math.random() * (max - minOrMax));
    },

normalise: function(value, min, max) {
        return (value - min) / (max - min);
    },

between: function(value, min, max) {
        return (value > min) && (value < max);
    },

inBounds: function(x, y, width, height) {
        return this.between(x, 0, width) && this.between(y, 0, height);
    },

invoke: function(fn, args) {
        return function(obj) {
            return obj[fn].apply(obj, args);
        };
    }
};

function fluent(fn) {
    return function() {
        fn.apply(this, arguments);
        return this;
    };
}

function Vector(x, y) {
    this.x = x || 0;
    this.y = y || 0;
}
Vector.prototype = {
    constructor: Vector,

getX: function() {
        return this.x;
    },

setX: fluent(function(x) {
        this.x = x;
    }),

getY: function() {
        return this.y;
    },

setY: fluent(function(y) {
        this.y = y;
    }),

getAngle: function() {
        return Math.atan2(this.y, this.x);
    },

setAngle: fluent(function(angle) {
        var magnitude = this.getMagnitude();
        this.x = Math.cos(angle) * magnitude;
        this.y = Math.sin(angle) * magnitude;
    }),

getMagnitude: function() {
        return Math.sqrt(
            Math.pow(this.x, 2) + Math.pow(this.y, 2)
        );
    },

setMagnitude: fluent(function(magnitude) {
        var angle = this.getAngle();
        this.x = Math.cos(angle) * magnitude;
        this.y = Math.sin(angle) * magnitude;
    })
};

Vector.add = function(a, b) {
    return new Vector(
        a.getX() + b.getX(),
        a.getY() + b.getY()
    );
};
Vector.subtract = function(a, b) {
    return new Vector(
        a.getX() - b.getX(),
        a.getY() - b.getY()
    );
};
Vector.multiply = function(vector, value) {
    return new Vector(
        vector.getX() * value,
        vector.getY() * value
    );
};

Vector.divide = function(vector, value) {
    return new Vector(
        vector.getX() / value,
        vector.getY() / value
    );
};

function Particle(x, y, speed, direction) {
    this.position = new Vector(x, y);
    this.velocity = new Vector().setMagnitude(speed).setAngle(direction);
}
Particle.prototype = {
    constructor: Particle,

update: function() {
        this.position = Vector.add(this.position, this.velocity);
    },

accelerate: function(acceleration) {
        this.velocity = Vector.add(this.velocity, acceleration);
    }
};

function Canvas(elem, width, height) {
    this.width = elem.width = width;
    this.height = elem.height = height;
    this.context = elem.getContext("2d");
}
Canvas.prototype = {
    constructor: Canvas,

clear: fluent(function(width, height) {
        width = width || this.width;
        height = height || this.height;

this.context.clearRect(0, 0, width, height);
    }),

drawCircle: fluent(function(x, y, radius) {
        this.context.beginPath();
        this.context.arc(x, y, radius, Math.PI * 2, false);
    }),

fill: fluent(function(color) {
        color = color || "#000000";
        this.context.fillStyle = color;
        this.context.fill();
    })
};

var NUM_PARTICLES = 40;

function RandomParticle(x, y) {
    this.particle = new Particle(x, y, util.random(2, 15), util.random(Math.PI * 2));
    this.hue = RandomParticle.randomHue();
    this.radius = util.random(3, 10);
}

RandomParticle.prototype = {
    constructor: RandomParticle,

gravity: new Vector(0, 0.1),

render: function(canvas) {
        var particle = this.particle;

// draw trail
        canvas
            .drawCircle(particle.position.getX(), particle.position.getY(), this.radius)
            .fill(this.getTrailColor());

// update and draw new pos
        particle.accelerate(this.gravity);
        particle.update();

canvas
            .drawCircle(particle.position.getX(), particle.position.getY(), this.radius)
            .fill(this.getColor());
    },

getColor: function() {
        return "hsl(" + this.hue + ", 75%, 60%)";
    },

getTrailColor: function() {
        return "hsl(" + this.hue + ", 75%, 70%)";
    },

isVisible: function(width, height) {
        //TODO: there's got to be a better way using standard inBounds
        var diameter = this.radius * 2;
        var x = this.particle.position.getX();
        var y = this.particle.position.getY();

return (
            util.between(x, 0 - diameter, width + diameter) &&
            util.between(y, 0 - diameter, height + diameter)
        );
    }
};

RandomParticle.randomHue = function() {
    return util.random(0, 360);
};

RandomParticle.createExplosion = function(x, y) {
    var explosion = [];
    for (var i = 0; i < NUM_PARTICLES; i++) {
        explosion.push(new RandomParticle(x, y));
    }
    return explosion;
};

window.onload = function() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    var canvas = new Canvas(document.querySelector("#canvas"), width, height);
    var particles = RandomParticle.createExplosion(width / 2, height / 2);

function render() {
        particles.forEach(util.invoke("render", [canvas]));
        particles = particles.filter(util.invoke("isVisible", [width, height]));
        requestAnimationFrame(render);
    }
    render();

function explode(e) {
        e = e.touches ? e.touches[0] : e;
        particles = particles.concat(RandomParticle.createExplosion(e.clientX, e.clientY));
    }

document.addEventListener("click", explode);
    document.addEventListener("touchend", explode);

};

编译

CSS

HTML

Coloured ribbon。点击屏幕触发动效。

ribbon

编辑器支持Emmet

快捷键

Coloured ribbon。点击屏幕触发动效。

ribbon

three.js 124版本实现彩虹过山车动画

纯CSS3制作的卡片三角形缎带

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：