使用canvas 2d api实现的3d城堡动画

Castle with 2d canvas api

h5, canvas, 建筑

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var TAU = Math.PI * 2;

function extend(a, b) {
    for (var prop in b) {
        a[prop] = b[prop];
    }
    return a;
}

function lerp(a, b, t) {
    return (b - a) * t + a;
}

function modulo(num, div) {
    return ((num % div) + div) % div;
}

function getDistance1(x, y) {
    return Math.sqrt(x * x + y * y);
}

function shapeSorter(a, b) {
    return a.sortValue - b.sortValue;
}

// -------------------------- Vector3 -------------------------- //

function Vector3(position) {
    this.set(position);
}

Vector3.prototype.set = function(pos) {
    pos = Vector3.sanitize(pos);
    this.x = pos.x;
    this.y = pos.y;
    this.z = pos.z;
    return this;
};

Vector3.prototype.rotate = function(rotation) {
    if (!rotation) {
        return;
    }
    rotation = Vector3.sanitize(rotation);
    this.rotateZ(rotation.z);
    this.rotateY(rotation.y);
    this.rotateX(rotation.x);
    return this;
};

Vector3.prototype.rotateZ = function(angle) {
    rotateProperty(this, angle, 'x', 'y');
};

Vector3.prototype.rotateX = function(angle) {
    rotateProperty(this, angle, 'y', 'z');
};

Vector3.prototype.rotateY = function(angle) {
    rotateProperty(this, angle, 'x', 'z');
};

function rotateProperty(vec, angle, propA, propB) {
    if (angle % TAU === 0) {
        return;
    }
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    var a = vec[propA];
    var b = vec[propB];
    vec[propA] = a * cos - b * sin;
    vec[propB] = b * cos + a * sin;
}

Vector3.prototype.add = function(vec) {
    if (!vec) {
        return;
    }
    vec = Vector3.sanitize(vec);
    this.x += vec.x;
    this.y += vec.y;
    this.z += vec.z;
    return this;
};

Vector3.prototype.subtract = function(vec) {
    if (!vec) {
        return;
    }
    vec = Vector3.sanitize(vec);
    this.x -= vec.x;
    this.y -= vec.y;
    this.z -= vec.z;
    return this;
};

Vector3.prototype.multiply = function(value) {
    if (value === undefined) {
        return;
    }
    // multiple all values by same number
    if (typeof value == 'number') {
        this.x *= value;
        this.y *= value;
        this.z *= value;
        return;
    }
    // multiply object
    var vec = Vector3.sanitize(value, 1);
    this.x *= vec.x;
    this.y *= vec.y;
    this.z *= vec.z;
    return this;
};

Vector3.prototype.transform = function(translation, rotation, scale) {
    this.multiply(scale);
    this.rotate(rotation);
    this.add(translation);
};

Vector3.prototype.lerp = function(vec, t) {
    vec = Vector3.sanitize(vec);
    this.x = lerp(this.x, vec.x, t);
    this.y = lerp(this.y, vec.y, t);
    this.z = lerp(this.z, vec.z, t);
    return this;
};

Vector3.prototype.magnitude = function() {
    var sum = this.x * this.x + this.y * this.y + this.z * this.z;
    // PERF: check if sum ~= 1 and skip sqrt
    if (Math.abs(sum - 1) < 0.00000001) {
        return 1;
    }
    return Math.sqrt(sum);
};

// ----- utils ----- //

// add missing properties
Vector3.sanitize = function(vec, value) {
    vec = vec || {};
    value = value || 0;
    vec.x = vec.x === undefined ? value : vec.x;
    vec.y = vec.y === undefined ? value : vec.y;
    vec.z = vec.z === undefined ? value : vec.z;
    return vec;
};

// -------------------------- Anchor -------------------------- //

function Anchor(options) {
    this.create(options);
}

Anchor.prototype.create = function(options) {
    // set defaults & options
    extend(this, this.constructor.defaults);
    options = options || {};
    this.setOptions(this, options);

// transform
    this.translate = new Vector3(options.translate);
    this.rotate = new Vector3(options.rotate);
    // scale
    if (typeof options.scale == 'number') {
        this.scale = Vector3.sanitize({}, options.scale);
    } else {
        this.scale = Vector3.sanitize(options.scale, 1);
    }

// origin
    this.origin = new Vector3();
    this.renderOrigin = new Vector3();
    // children
    this.children = [];
    if (this.addTo) {
        this.addTo.addChild(this);
    }
};

Anchor.defaults = {};

Anchor.optionKeys = Object.keys(Anchor.defaults).concat([
    'rotate',
    'translate',
    'scale',
    'addTo',
]);

Anchor.prototype.setOptions = function(item, options) {
    var optionKeys = this.constructor.optionKeys;

for (var key in options) {
        if (optionKeys.includes(key)) {
            item[key] = options[key];
        }
    }
};

Anchor.prototype.addChild = function(shape) {
    this.children.push(shape);
};

// ----- update ----- //

Anchor.prototype.update = function() {
    // update self
    this.reset();
    // update children
    this.children.forEach(function(child) {
        child.update();
    });
    this.transform(this.translate, this.rotate, this.scale);
};

Anchor.prototype.reset = function() {
    this.renderOrigin.set(this.origin);
};

Anchor.prototype.transform = function(translation, rotation, scale) {
    this.renderOrigin.transform(translation, rotation, scale);
    // transform children
    this.children.forEach(function(child) {
        child.transform(translation, rotation, scale);
    });
};

Anchor.prototype.updateGraph = function() {
    this.update();
    this.checkFlatGraph();
    this.flatGraph.forEach(function(item) {
        item.updateSortValue();
    });
    // z-sort
    this.flatGraph.sort(shapeSorter);
};

Anchor.prototype.checkFlatGraph = function() {
    if (!this.flatGraph) {
        this.updateFlatGraph();
    }
};

Anchor.prototype.updateFlatGraph = function() {
    this.flatGraph = this.getFlatGraph();
};

// return Array of self & all child graph items
Anchor.prototype.getFlatGraph = function() {
    var flatGraph = [this];
    this.children.forEach(function(child) {
        var childFlatGraph = child.getFlatGraph();
        flatGraph = flatGraph.concat(childFlatGraph);
    });
    return flatGraph;
};

Anchor.prototype.updateSortValue = function() {
    this.sortValue = this.renderOrigin.z;
};

// ----- render ----- //

Anchor.prototype.render = function() {};

Anchor.prototype.renderGraph = function(ctx) {
    if (!ctx) {
        throw new Error('ctx is ' + ctx + '. ' +
            'Canvas context required for render. Check .renderGraph( ctx ).');
    }
    this.checkFlatGraph();
    this.flatGraph.forEach(function(item) {
        item.render(ctx);
    });
};

// ----- misc ----- //

Anchor.prototype.copy = function(options) {
    // copy options
    var itemOptions = {};
    var optionKeys = this.constructor.optionKeys;
    optionKeys.forEach(function(key) {
        itemOptions[key] = this[key];
    }, this);
    // add set options
    this.setOptions(itemOptions, options);
    var ItemClass = this.constructor;
    return new ItemClass(itemOptions);
};

Anchor.prototype.copyGraph = function(options) {
    var clone = this.copy(options);
    this.children.forEach(function(child) {
        child.copyGraph({
            addTo: clone,
        });
    });
    return clone;
};

Anchor.prototype.normalizeRotate = function() {
    this.rotate.x = modulo(this.rotate.x, TAU);
    this.rotate.y = modulo(this.rotate.y, TAU);
    this.rotate.z = modulo(this.rotate.z, TAU);
};

// ----- subclass ----- //

function getSubclass(Super) {
    return function(defaults) {
        // create constructor
        function Item(options) {
            this.create(options);
        }

Item.prototype = Object.create(Super.prototype);
        Item.prototype.constructor = Item;

Item.defaults = extend({}, Super.defaults);
        extend(Item.defaults, defaults);
        // create optionKeys
        Item.optionKeys = Super.optionKeys.slice(0);
        // add defaults keys to optionKeys, dedupe
        Object.keys(Item.defaults).forEach(function(key) {
            if (!Item.optionKeys.includes(key)) {
                Item.optionKeys.push(key);
            }
        });

Item.subclass = getSubclass(Item);

return Item;
    };
}

Anchor.subclass = getSubclass(Anchor);

// -------------------------- PathAction -------------------------- //

function PathAction(method, points, previousPoint) {
    this.method = method;
    this.points = points.map(mapVectorPoint);
    this.renderPoints = points.map(mapVectorPoint);
    this.previousPoint = previousPoint;
    this.endRenderPoint = this.renderPoints[this.renderPoints.length - 1];
    // arc actions come with previous point & corner point
    // but require bezier control points
    if (method == 'arc') {
        this.controlPoints = [new Vector3(), new Vector3()];
    }
}

function mapVectorPoint(point) {
    return new Vector3(point);
}

PathAction.prototype.reset = function() {
    // reset renderPoints back to orignal points position
    var points = this.points;
    this.renderPoints.forEach(function(renderPoint, i) {
        var point = points[i];
        renderPoint.set(point);
    });
};

PathAction.prototype.transform = function(translation, rotation, scale) {
    this.renderPoints.forEach(function(renderPoint) {
        renderPoint.transform(translation, rotation, scale);
    });
};

PathAction.prototype.render = function(ctx) {
    this[this.method](ctx);
};

PathAction.prototype.move = function(ctx) {
    var point = this.renderPoints[0];
    ctx.moveTo(point.x, point.y);
};

PathAction.prototype.line = function(ctx) {
    var point = this.renderPoints[0];
    ctx.lineTo(point.x, point.y);
};

PathAction.prototype.bezier = function(ctx) {
    var cp0 = this.renderPoints[0];
    var cp1 = this.renderPoints[1];
    var end = this.renderPoints[2];
    ctx.bezierCurveTo(cp0.x, cp0.y, cp1.x, cp1.y, end.x, end.y);
};

PathAction.prototype.arc = function(ctx) {
    var prev = this.previousPoint;
    var corner = this.renderPoints[0];
    var end = this.renderPoints[1];
    var cp0 = this.controlPoints[0];
    var cp1 = this.controlPoints[1];
    cp0.set(prev).lerp(corner, 9 / 16);
    cp1.set(end).lerp(corner, 9 / 16);
    ctx.bezierCurveTo(cp0.x, cp0.y, cp1.x, cp1.y, end.x, end.y);
};

/* globals Shape: true */

// -------------------------- Shape -------------------------- //

var Shape = Anchor.subclass({
    stroke: true,
    fill: false,
    color: '#333',
    lineWidth: 1,
    closed: true,
    rendering: true,
    path: [{}],
    front: {
        z: 1
    },
    backfaceVisible: true,
});

Shape.prototype.create = function(options) {
    Anchor.prototype.create.call(this, options);
    this.updatePath(); // hook for Rect, Ellipse, & other subclasses
    this.updatePathActions();

// front
    this.front = new Vector3(options.front || this.front);
    this.renderFront = new Vector3(this.front);
    this.renderNormal = new Vector3();
};

var actionNames = [
    'move',
    'line',
    'bezier',
    'arc',
];

// place holder for Ellipse, Rect, etc.
Shape.prototype.updatePath = function() {};

// parse path into PathActions
Shape.prototype.updatePathActions = function() {
    var previousPoint;
    this.pathActions = this.path.map(function(pathPart, i) {
        // pathPart can be just vector coordinates -> { x, y, z }
        // or path instruction -> { arc: [ {x0,y0,z0}, {x1,y1,z1} ] }
        var keys = Object.keys(pathPart);
        var method = keys[0];
        var points = pathPart[method];
        var isInstruction = keys.length === 1 && actionNames.includes(method) &&
            Array.isArray(points);

if (!isInstruction) {
            method = 'line';
            points = [pathPart];
        }

// first action is always move
        method = i === 0 ? 'move' : method;
        // arcs require previous last point
        var pathAction = new PathAction(method, points, previousPoint);
        // update previousLastPoint
        previousPoint = pathAction.endRenderPoint;
        return pathAction;
    });
};

// ----- update ----- //

Shape.prototype.reset = function() {
    this.renderOrigin.set(this.origin);
    this.renderFront.set(this.front);
    // reset pathAction render points
    this.pathActions.forEach(function(pathAction) {
        pathAction.reset();
    });
};

Shape.prototype.transform = function(translation, rotation, scale) {
    // calculate render points backface visibility & cone/hemisphere shapes
    this.renderOrigin.transform(translation, rotation, scale);
    this.renderFront.transform(translation, rotation, scale);
    this.renderNormal.set(this.renderOrigin).subtract(this.renderFront);
    // transform points
    this.pathActions.forEach(function(pathAction) {
        pathAction.transform(translation, rotation, scale);
    });
    // transform children
    this.children.forEach(function(child) {
        child.transform(translation, rotation, scale);
    });
};

Shape.prototype.updateSortValue = function() {
    var sortValueTotal = 0;
    this.pathActions.forEach(function(pathAction) {
        sortValueTotal += pathAction.endRenderPoint.z;
    });
    // average sort value of all points
    // def not geometrically correct, but works for me
    this.sortValue = sortValueTotal / this.pathActions.length;
};

// ----- render ----- //

Shape.prototype.render = function(ctx) {
    var length = this.pathActions.length;
    if (!this.rendering || !length) {
        return;
    }
    // do not render if hiding backface
    var isFacingBack = this.renderNormal.z > 0;
    if (!this.backfaceVisible && isFacingBack) {
        return;
    }
    // render dot or path
    var isDot = length == 1;
    if (isDot) {
        this.renderDot(ctx);
    } else {
        this.renderPath(ctx);
    }
};

// Safari does not render lines with no size, have to render circle instead
Shape.prototype.renderDot = function(ctx) {
    ctx.fillStyle = this.color;
    var point = this.pathActions[0].endRenderPoint;
    ctx.beginPath();
    var radius = this.lineWidth / 2;
    ctx.arc(point.x, point.y, radius, 0, TAU);
    ctx.fill();
};

Shape.prototype.renderPath = function(ctx) {
    // set render properties
    ctx.fillStyle = this.color;
    ctx.strokeStyle = this.color;
    ctx.lineWidth = this.lineWidth;

// render points
    ctx.beginPath();
    this.pathActions.forEach(function(pathAction) {
        pathAction.render(ctx);
    });
    var isTwoPoints = this.pathActions.length == 2 &&
        this.pathActions[1].method == 'line';
    if (!isTwoPoints && this.closed) {
        ctx.closePath();
    }
    if (this.stroke) {
        ctx.stroke();
    }
    if (this.fill) {
        ctx.fill();
    }
};

/* globals Rect: true */

// -------------------------- Rect -------------------------- //

var Rect = Shape.subclass({
    width: 1,
    height: 1,
});

Rect.prototype.updatePath = function() {
    var x = this.width / 2;
    var y = this.height / 2;
    this.path = [{
        x: -x,
        y: -y
    }, {
        x: x,
        y: -y
    }, {
        x: x,
        y: y
    }, {
        x: -x,
        y: y
    }, ];
};

// -------------------------- Dragger -------------------------- //

// quick & dirty drag event stuff
// messes up if multiple pointers/touches

// event support, default to mouse events
var downEvent = 'mousedown';
var moveEvent = 'mousemove';
var upEvent = 'mouseup';
if (window.PointerEvent) {
    // PointerEvent, Chrome
    downEvent = 'pointerdown';
    moveEvent = 'pointermove';
    upEvent = 'pointerup';
} else if ('ontouchstart' in window) {
    // Touch Events, iOS Safari
    downEvent = 'touchstart';
    moveEvent = 'touchmove';
    upEvent = 'touchend';
}

function noop() {}

function Dragger(options) {
    this.startElement = options.startElement;
    this.onPointerDown = options.onPointerDown || noop;
    this.onPointerMove = options.onPointerMove || noop;
    this.onPointerUp = options.onPointerUp || noop;

this.startElement.addEventListener(downEvent, this);
}

Dragger.prototype.handleEvent = function(event) {
    var method = this['on' + event.type];
    if (method) {
        method.call(this, event);
    }
};

Dragger.prototype.onmousedown =
    Dragger.prototype.onpointerdown = function(event) {
        this.pointerDown(event, event);
    };

Dragger.prototype.ontouchstart = function(event) {
    this.pointerDown(event, event.changedTouches[0]);
};

Dragger.prototype.pointerDown = function(event, pointer) {
    event.preventDefault();
    this.dragStartX = pointer.pageX;
    this.dragStartY = pointer.pageY;
    window.addEventListener(moveEvent, this);
    window.addEventListener(upEvent, this);
    this.onPointerDown(pointer);
};

Dragger.prototype.ontouchmove = function(event) {
    // HACK, moved touch may not be first
    this.pointerMove(event, event.changedTouches[0]);
};

Dragger.prototype.onmousemove =
    Dragger.prototype.onpointermove = function(event) {
        this.pointerMove(event, event);
    };

Dragger.prototype.pointerMove = function(event, pointer) {
    event.preventDefault();
    var moveX = this.dragStartX - pointer.pageX;
    var moveY = this.dragStartY - pointer.pageY;
    this.onPointerMove(pointer, moveX, moveY);
};

Dragger.prototype.onmouseup =
    Dragger.prototype.onpointerup =
    Dragger.prototype.ontouchend =
    Dragger.prototype.pointerUp = function(event) {
        window.removeEventListener(moveEvent, this);
        window.removeEventListener(upEvent, this);
        this.onPointerUp(event);
    };

// -------------------------- demo -------------------------- //

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var w = 24;
var h = 24;
var minWindowSize = Math.min(window.innerWidth - 20, window.innerHeight - 40);
var zoom = Math.floor(minWindowSize / w);
var pixelRatio = window.devicePixelRatio || 1;
zoom *= pixelRatio;
var canvasWidth = canvas.width = w * zoom;
var canvasHeight = canvas.height = h * zoom;
// set canvas screen size
if (pixelRatio > 1) {
    canvas.style.width = canvasWidth / pixelRatio + 'px';
    canvas.style.height = canvasHeight / pixelRatio + 'px';
}

var white = 'white';
var black = '#333';

var initRotate = {
    y: TAU / 4
};

var scene = new Anchor({
    rotate: initRotate,
});

[Shape, Rect].forEach(function(ItemClass) {
    ItemClass.defaults.fill = true;
    // ItemClass.defaults.stroke = true;
    ItemClass.defaults.backfaceVisible = false;
    ItemClass.defaults.lineWidth = 1 / zoom;
});

// -- illustration shapes --- //

function makeWall(options) {
    var rotor = new Anchor({
        addTo: scene,
        rotate: options.rotate,
    });

// rotor
    var wall = new Anchor({
        addTo: rotor,
        translate: {
            z: 4
        },
    });

var topBlock = new Anchor({
        addTo: wall,
        translate: {
            x: -4,
            y: -4
        },
    });

// side faces
    var face = new Rect({
        addTo: topBlock,
        width: 2,
        height: 2,
        translate: {
            z: 1
        },
        color: options.outside,
    });
    face.copy({
        translate: {
            x: -1
        },
        rotate: {
            y: TAU / 4
        },
        color: options.left,
    });
    face.copy({
        translate: {
            x: 1
        },
        rotate: {
            y: -TAU / 4
        },
        color: options.right,
    });
    face.copy({
        translate: {
            z: -1
        },
        rotate: {
            y: TAU / 2
        },
        color: options.inside,
    });
    // top
    face.copy({
        translate: {
            y: -1
        },
        rotate: {
            x: TAU / 4
        },
        color: black,
    });

topBlock.copyGraph({
        translate: {
            x: 0,
            y: -4
        },
    });

var topTile = new Rect({
        addTo: wall,
        width: 2,
        height: 2,
        color: black,
        rotate: {
            x: TAU / 4
        },
        translate: {
            x: -2,
            y: -3
        },
    });
    topTile.copy({
        translate: {
            x: 2,
            y: -3
        }
    });

// outside arch

// outside arch
    var arch = new Shape({
        addTo: wall,
        path: [{
            x: 0,
            y: -3
        }, {
            x: 3,
            y: -3
        }, {
            x: 3,
            y: 2
        }, {
            arc: [{
                x: 3,
                y: -1
            }, {
                x: 0,
                y: -1
            }]
        }, ],
        translate: {
            z: 1
        },
        color: options.outside,
    });
    arch.copy({
        scale: {
            x: -1
        },
    });

// inside arch
    arch.copy({
        translate: {
            z: -1
        },
        rotate: {
            y: TAU / 2
        },
        color: options.inside,
    });
    arch.copy({
        translate: {
            z: -1
        },
        rotate: {
            y: TAU / 2
        },
        scale: {
            x: -1
        },
        color: options.inside,
    });

// outside columns
    var outsideColumn = new Rect({
        addTo: wall,
        width: 2,
        height: 8,
        translate: {
            x: -4,
            y: 1,
            z: 1
        },
        color: options.outside,
    });
    outsideColumn.copy({
        translate: {
            x: 4,
            y: 1,
            z: 1
        },
    });

var insideColumn = new Rect({
        addTo: wall,
        width: 2,
        height: 3,
        translate: {
            x: -3,
            y: 3.5
        },
        rotate: {
            y: -TAU / 4
        },
        color: options.right,
    });
    insideColumn.copy({
        translate: {
            x: 3,
            y: 3.5
        },
        rotate: {
            y: TAU / 4
        },
        color: options.left,
    });

// under arch, quarter arc
    var underArch = new Shape({
        addTo: wall,
        path: [{
            x: 3,
            y: 2
        }, {
            arc: [{
                x: 3,
                y: -1
            }, {
                x: 0,
                y: -1
            }]
        }, {
            x: 0,
            y: -1,
            z: -2
        }, {
            arc: [{
                x: 3,
                y: -1,
                z: -2
            }, {
                x: 3,
                y: 2,
                z: -2
            }, ]
        }, ],
        translate: {
            z: 1
        },
        backfaceVisible: true,
        color: options.left,
    });
    underArch.copyGraph({
        scale: {
            x: -1
        },
        color: options.right,
    });

// feet soles
    new Rect({
        addTo: wall,
        width: 2,
        height: 2,
        translate: {
            x: -4,
            y: 5,
            z: 0
        },
        rotate: {
            x: -TAU / 4
        },
        color: white,
    });

}

makeWall({
    rotate: {},
    outside: white,
    inside: black,
    left: white,
    right: black,
});

makeWall({
    rotate: {
        y: -TAU / 4
    },
    outside: black,
    inside: white,
    left: white,
    right: black,
});

makeWall({
    rotate: {
        y: -TAU / 2
    },
    outside: black,
    inside: white,
    left: black,
    right: white,
});

makeWall({
    rotate: {
        y: TAU * -3 / 4
    },
    outside: white,
    inside: black,
    left: black,
    right: white,
});

// -- animate --- //

var isRotating = true;
var t = 0;
var tSpeed = 1 / 105;

// -- update -- //

function easeInOut(i) {
    i = i % 1;
    var isFirstHalf = i < 0.5;
    var i1 = isFirstHalf ? i : 1 - i;
    i1 = i1 / 0.5;
    // make easing steeper with more multiples
    var i2 = i1 * i1 * i1 * i1;
    i2 = i2 / 2;
    return isFirstHalf ? i2 : i2 * -1 + 1;
}

// var keyframes = [
//   { x: -1/4, y: -1/4 },
//   { x: -35/350, y: 1/8 },
//   { x: 0, y: 2/4 },
//   { x: -35/350, y: 5/8 },
//   { x: -1/4, y: 3/4 },
// ];

var keyframes = [{
    x: 0,
    y: 1 / 4
}, {
    x: -35 / 350,
    y: 5 / 8
}, {
    x: -1 / 4,
    y: 3 / 4
}, {
    x: -35 / 350,
    y: 9 / 8
}, {
    x: 0,
    y: 5 / 4
}, ];

function update() {

if (isRotating) {
        var easeT = easeInOut(t);
        var turnLimit = keyframes.length - 1;
        var turn = Math.floor(t % turnLimit);
        var keyframeA = keyframes[turn];
        var keyframeB = keyframes[turn + 1];
        scene.rotate.x = lerp(keyframeA.x * TAU, keyframeB.x * TAU, easeT);
        scene.rotate.y = lerp(keyframeA.y * TAU, keyframeB.y * TAU, easeT);
        t += tSpeed;
    }

scene.updateGraph();
}

// -- render -- //

ctx.lineCap = 'round';
ctx.lineJoin = 'round';

function render() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

ctx.save();
    ctx.translate(canvasWidth / 2, canvasHeight / 2);
    ctx.scale(zoom, zoom);

scene.renderGraph(ctx);

ctx.restore();
}

// ---- animate ---- //

function animate() {
    update();
    render();
    requestAnimationFrame(animate);
}

animate();

// ----- inputs ----- //

// click drag to rotate
var dragStartAngleX, dragStartAngleY;

new Dragger({
    startElement: canvas,
    onPointerDown: function() {
        isRotating = false;
        dragStartAngleX = scene.rotate.x;
        dragStartAngleY = scene.rotate.y;
    },
    onPointerMove: function(pointer, moveX, moveY) {
        var angleXMove = moveY / canvasWidth * TAU;
        var angleYMove = moveX / canvasWidth * TAU;
        scene.rotate.x = dragStartAngleX + angleXMove;
        scene.rotate.y = dragStartAngleY + angleYMove;
    },
});

编译

CSS

HTML

Castle with 2d canvas api

h5, canvas, 建筑

编辑器支持Emmet

快捷键

Castle with 2d canvas api

h5, canvas, 建筑

如何使用canvas 2d实现三维顶点海洋动画

使用Perlin.js和Vector2.js实现的粒子流动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：