HTML5/Canvas交互式定制星的形状

Star Shape Control，通过增加和减少顶点数量来控制star的形状。

html5, star

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*Using the first version of CACIQUE.JS, my geometry framework Get it here: http://pedrocacique.com/frameworks/cacique/cacique_1_0_0.min.js
 */

//---------- MAIN FUNCTION ----------
function init() {
    star = new Shape(
        new Polygon(100, 5, true),
        new Point(cw / 2, ch / 2),
        new Color(255, 237, 102, 1), {
            lineWidth: 2,
            lineColor: new Color(229, 211, 78, 1)
        }
    );
    controls = [];
    var color = new Color(106, 206, 232, 1);
    controls.push(new Shape(new Circle(5), star.geometry.circle.getPositionByAngle(-Math.PI / 2).add(star.position), color, {
        lineWidth: 0,
        name: "point"
    }));
    controls.push(new Shape(new Circle(5), star.geometry.innerCircle.getPositionByAngle(-Math.PI / 2 + Math.PI / star.geometry.points).add(star.position), color, {
        lineWidth: 0,
        name: "inner"
    }));
    animate();
    canvas.addEventListener("mousedown", onMouseDown);
    canvas.addEventListener("mouseup", onMouseUp);
}

function animate() {
    ctx.clearRect(0, 0, cw, ch);
    star.draw(canvas);
    for (var i = 0; i < controls.length; i++)
        controls[i].draw(canvas);
    requestAnimationFrame(animate);
}

function onMouseDown(evt) {
    var pt = getMousePos(canvas, evt);
    for (var i = 0; i < controls.length; i++) {
        if (pt.distance(controls[i].position) < controls[i].geometry.radius) {
            dragging = controls[i];
            canvas.addEventListener("mousemove", onMouseMove);
            break;
        }
    }

}

function onMouseUp(evt) {
    dragging = null;
}

function addPoint() {
    star.geometry.points++;
    repos();
}

function removePoint() {
    if (star.geometry.points > 3) star.geometry.points--;
    repos();
}

function repos() {
    for (var i = 0; i < controls.length; i++) {
        if (controls[i].name == "inner")
            controls[i].position = star.geometry.innerCircle.getPositionByAngle(-Math.PI / 2 + Math.PI / star.geometry.points).add(star.position);
    }

}

//-----------------------------------
var canvas, ctx, cw, ch;
var FPS = 60;
var controls = [],
    star, dragging;

var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
    return setTimeout(callback, FPS);
};

window.onload = function() {
    initCanvas();
    ctx.clearRect(0, 0, cw, ch);
    init();

}
window.onresize = function() {
    initCanvas();
    ctx.clearRect(0, 0, cw, ch);
    init();
};

function initCanvas() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    cw = window.innerWidth;
    ch = window.innerHeight;
    canvas.width = cw;
    canvas.height = ch;
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return new Point(
        evt.clientX - rect.left,
        evt.clientY - rect.top
    );
}

编译

CSS

HTML

function animate() {
        ctx.clearRect(0, 0, cw, ch), requestAnimationFrame(animate)
    }

function Shape(t, e, i, n) {
        this.position = null == e || "Point" != e.classname ? new Point : e, this.geometry = null == t || "GenericObject" != t.constructor.name ? new Circle : t, this.color = null == i || "GenericObject" != t.constructor.name || "Color" != i.classname && "Gradient" != i.classname ? null : i, this.lineColor = new Color, this.lineWidth = 1, this.scale = 1, this.decay = 0, this.showPoints = !0, null != n && this.setProperties(n), GenericObject.call(this, "Shape")
    }

function Point(t, e) {
        this.x = null == t || isNaN(t) ? 0 : t, this.y = null == e || isNaN(e) ? 0 : e, GenericObject.call(this, "Point")
    }

function Rect(t, e) {
        this.p1 = null == t || "Point" != t.classname ? new Point : t, this.p2 = null == e || "Point" != e.classname ? new Point(10, 0) : e, this.m = this.p2.x == this.p1.x ? 0 : (this.p2.y - this.p1.y) / (this.p2.x - this.p1.x), this.n = this.p2.y - this.m * this.p2.x, GenericObject.call(this, "Rect")
    }

function BezierLine(t) {
        this.bezierCurve = t, GenericObject.call(this, "BezierLine")
    }

function Circle(t) {
        this.center = new Point, this.radius = null == t || isNaN(t) ? 1 : t, GenericObject.call(this, "Circle")
    }

function Rectangle(t, e) {
        this.width = null == t || isNaN(t) ? 1 : t, this.height = null == e || isNaN(e) ? this.width : e, GenericObject.call(this, "Rectangle")
    }

function Polygon(t, e, i, n) {
        this.isStar = null != i ? i : !1, this.radius = null == t || isNaN(t) ? 5 : t, this.innerRadius = null == n || isNaN(n) ? i ? this.radius / 2 : this.radius : n, this.points = null == e || isNaN(e) ? 5 : e, this.circle = new Circle(this.radius), this.innerCircle = new Circle(this.innerRadius), this.points < 3 && (this.points = 3), GenericObject.call(this, "Polygon")
    }

function Heart() {
        GenericObject.call(this, "Heart")
    }

function Color(t, e, i, n) {
        this.r = null == t || isNaN(t) ? 0 : t, this.g = null == e || isNaN(e) ? 0 : e, this.b = null == i || isNaN(i) ? 0 : i, this.a = null == n || isNaN(n) ? 1 : n, this.hex = this.toHex(), GenericObject.call(this, "Color")
    }

function Gradient(t, e, i, n) {
        this.rect = null != e && "GenericObject" == e.constructor.name && "Rect" == e.classname ? e : new Rect, this.colors = null != t && Array.isArray(t) ? t : [], this.radius1 = null == i || isNaN(i) ? 0 : i, this.radius2 = null == n || isNaN(n) ? 0 : n, GenericObject.call(this, "Gradient")
    }

function BezierCurve(t, e, i, n, r) {
        this.startPoint = null != t ? t : new Point(100, 200), this.endPoint = null != n ? n : new Point(200, 100), this.controlPoint1 = null != e ? e : new Point(150, 200), this.controlPoint2 = null != i ? i : new Point(200, 150), null != r && this.setProperties(r), GenericObject.call(this, "BezierCurve")
    }

function Vector(t, e, i) {
        this.p1 = null != t && "GenericObject" == t.constructor.name && "Point" == t.classname ? t : new Point, this.p2 = null != e && "GenericObject" == e.constructor.name && "Point" == e.classname ? e : new Point, this.rect = new Rect(t, e), this.origin = new Point, GenericObject.call(this, "Vector")
    }

Star Shape Control，通过增加和减少顶点数量来控制star的形状。

html5, star

编辑器支持Emmet

快捷键

Star Shape Control，通过增加和减少顶点数量来控制star的形状。

html5, star

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

HTML5/Canvas交互式贝塞尔曲线生成器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：