HTML5点到线到三角形到多边形动态增长变形动画

Triangle to Hexagon, 学习在HTML5 Canvas上绘制几何图形|矢量图动画。

html5, vector

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

Vector2 = function(a, b) {
    return this.x = a || 0, this.y = b || 0, this
}, Vector2.prototype.add = function(a) {
    return this.x += a.x, this.y += a.y, this
}, Vector2.prototype.sub = function(a) {
    return "object" == typeof a && (this.x -= a.x, this.y -= a.y), "number" == typeof a && (this.x -= a, this.y -= a), this
}, Vector2.prototype.mult = function(a) {
    return "object" == typeof a ? (this.x *= a.x, this.y *= a.y) : "number" == typeof a && (this.x *= a, this.y *= a), this
}, Vector2.prototype.div = function(a) {
    return "object" == typeof a ? (this.x /= a.x, this.y /= a.y) : "number" == typeof a && (this.x /= a, this.y /= a), this
}, Vector2.prototype.norm = function() {
    return this.div(this.mag()), this
}, Vector2.prototype.setMag = function(a) {
    return this.norm(), this.mult(a), this
}, Vector2.prototype.limit = function(a) {
    return this.mag() > a ? (this.setMag(a), this) : this
}, Vector2.prototype.direction = function(a) {
    return Math.atan2(this.y, this.x)
}, Vector2.prototype.rotate = function(a) {
    var b = this.direction() + a,
        c = this.mag();
    return this.x = Math.cos(b) * c, this.y = Math.sin(b) * c, this
}, Vector2.prototype.mag = function() {
    return Math.sqrt(this.x * this.x + this.y * this.y)
}, Vector2.prototype.angleTo = function(a) {
    var b = Math.atan2(a.x - this.x, a.y - this.y);
    return b
}, Vector2.prototype.distanceTo = function(a) {
    return Math.sqrt(Math.pow(a.x - this.x, 2) + Math.pow(a.y - this.y, 2))
}, Vector2.prototype.copy = function() {
    return new Vector2(this.x, this.y)
}, Vector2.prototype.set = function() {
    var a = arguments;
    return 1 == a.length ? "object" == typeof a[0] ? (this.x = a[0].x, this.y = a[0].y) : "number" == typeof a[0] && (this.x = a[0], this.y = a[0]) : 2 == a.length && (this.x = a[0], this.y = a[1]), this
}, Vector2.prototype.map = function(a, b, c, d) {
    return a < this.x < b && c < this.y < d ? this : (this.x < a ? this.x = a : this, this.x > b ? this.x = b : this, this.y < c ? this.y = c : this, void(this.y > d ? this.y = d : this))
}, Math.radians = function(a) {
    return a * (Math.PI / 180)
}, Math.degrees = function(a) {
    return a * (180 / Math.PI)
}, random = function() {
    if (!arguments) return Math.random();
    var a = arguments;
    return 1 == a.length ? Math.random() * a[0] : 2 == a.length ? Math.random() * (Math.max(a[0], a[1]) - Math.min(a[0], a[1])) + Math.min(a[0], a[1]) : void 0
}, random = function(a, b) {
    return null == b && (b = a, a = 0), a + Math.floor(Math.random() * (b - a + 1))
};

var gradient = $.createLinearGradient(w / 2 + opts.radius, h / 2 + opts.radius, w / 2 - opts.radius, h / 2 - opts.radius);
        for (var i = 0; i < this.points.length; i++) {
            var length = this.points.length;
            var ang = (pi2 / length) * i * 180 / pi;
            gradient.addColorStop(i / length, "hsl(" + ang + ", 50%, 50%)");
        }
        $.closePath();
        $.strokeStyle = gradient;
        $.lineWidth = opts.lineWidth;
        $.lineJoin = opts.joinStyle;
        $.stroke();
    }

Point.prototype.update = function() {
        this.attractTo(this.destiny);
        this.speed.add(this.acc);
        this.pos.add(this.speed);
        this.acc.set(0);
        this.gonnaGetRemoved && this.pos.distanceTo({
            x: opts.radius + w / 2,
            y: h / 2
        }) < 1 ? shape.points.pop() : undefined;
        return this;
    }
    Point.prototype.attractTo = function(target) {
        var tar = target.copy();
        var distance = this.pos.distanceTo(target);
        tar.sub(this.pos);
        tar.limit(distance / 2);

var des = tar.sub(this.speed);
        des.limit(2);
        this.acc.add(tar);
    }

function setup() {
        createCanvas();
        addListeners();
        shape = new Shape(w / 2, h / 2);
        gui = new dat.GUI();
        gui.close();
        gui.add(opts, "addSpeed", 0, 60, 1);
        gui.add(opts, "lineWidth", 0.5, 50, 1, 0.5);
        gui.add(opts, "joinStyle", ["round", "bevel", "miter"]);
        document.body.appendChild(stats.domElement);
        window.requestAnimationFrame(loop);
    }

function loop() {
        stats.begin();
        drawBg();

tick++;
        tick % opts.addSpeed == 0 ? (shape.iDir ? shape.addPoint() : shape.removePoint()) : undefined
        shape.update().render();

opts.showFPS ? stats.domElement.style["display"] = "block" : stats.domElement.style["display"] = "none";
        window.requestAnimationFrame(loop);
        stats.end();
    }

function createCanvas() {
        var el = document.createElement("canvas"),
            ctx = el.getContext("2d");
        for (var style in canvasStyles) {
            el.style[style] = canvasStyles[style];
        }
        document.body.appendChild(el);
        canvasBody = el;
        $ = ctx;
        canvasBody.width = w;
        canvasBody.height = h;
        document.body.style["overflow"] = "hidden"
        return [el, ctx];
    }

function drawBg() {
        $.fillStyle = opts.bgc;
        $.fillRect(0, 0, w, h);
    }

function addListeners() {
        window.addEventListener("resize", resize);
        window.addEventListener("mousemove", mouseMove);
        canvasBody.addEventListener("mousedown", mouseDown);
        canvasBody.addEventListener("mouseup", mouseUp);
        canvasBody.addEventListener("touchmove", touchMove);
        canvasBody.addEventListener("touchstart", touchStart);
        canvasBody.addEventListener("touchend", touchEnd);
    }

function resize() {
        w = canvasBody.width = window.innerWidth;
        h = canvasBody.height = window.innerHeight;
    }

function mouseDown(event) {
        mousePressed = true;
        Mouse.set(event.pageX, event.pageY);
    }

function mouseUp(event) {
        mousePressed = false;
    }

function mouseMove(event) {
        Mouse.set(event.pageX, event.pageY);
    }

function touchMove(event) {
        var touches = event.changedTouches;
        Mouse.set(touches[0].pageX, touches[0].pageY);
    }

function touchStart(event) {
        e.preventDefault();
        mousePressed = true;
        touchMove(event);
    }

function touchEnd(event) {
        mousePressed = false;
    }
    setup();
})()

编译

CSS

HTML

Triangle to Hexagon, 学习在HTML5 Canvas上绘制几何图形|矢量图动画。

html5, vector

编辑器支持Emmet

快捷键

Triangle to Hexagon, 学习在HTML5 Canvas上绘制几何图形|矢量图动画。

html5, vector

HTML5 Canvas圆圈里面的三角形变换动画

HTML5/Canvas交互式漂浮三角形动画背景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：