CANVAS 用圈环绕着的正方形动画

circling-squares-1.0.0

CANVAS

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var radius = 32;
var ringRadius = 120;
var stepCount = 12;
var cycleDuration = 60 * 4;

setTimeout(function() {
    var canvasEl = document.getElementById('js-canvas');
    var width = canvasEl.width;
    var height = canvasEl.height;

var canvasCtx = canvasEl.getContext('2d');
    var centerX = width / 2;
    var centerY = height / 2;

var sliceEl = document.createElement('canvas');
    var _ref = [radius, radius];
    sliceEl.width = _ref[0];
    sliceEl.height = _ref[1];

var sliceCtx = sliceEl.getContext('2d');
    var interpolator = createInterpolator(0, 0.5522848, 1);
    var doodadEl = document.createElement('canvas');
    var _ref2 = [radius * 2, radius * 2];
    doodadEl.width = _ref2[0];
    doodadEl.height = _ref2[1];

var doodadCtx = doodadEl.getContext('2d');
    animate(0, doodadCtx, canvasCtx, sliceCtx, interpolator);
}, 0);

function animate(iteration, doodadCtx, canvasCtx, sliceCtx, interpolator) {
    var _canvasCtx$canvas = canvasCtx.canvas;
    var width = _canvasCtx$canvas.width;
    var height = _canvasCtx$canvas.height;

canvasCtx.clearRect(0, 0, width, height);
    var stepSize = Math.PI * 2 / stepCount;
    var centerX = width / 2;
    var centerY = height / 2;
    Array.apply(undefined, Array(stepCount)).forEach(function(_, index) {
        var offset = index * (cycleDuration / stepCount);
        var t = (iteration + cycleDuration - offset) % cycleDuration / (cycleDuration / 1); // tweak the `1`
        if (t > 0.5) {
            t = 1 - t;
        }
        t *= 2;
        t = Math.max(0, Math.min(1, t));
        var angle = stepSize * index;
        var xPos = centerX + Math.cos(angle) * ringRadius;
        var yPos = centerY + Math.sin(angle) * ringRadius;
        var orbitAngle = Math.atan2(yPos - centerY, xPos - centerX) + Math.PI / 2;
        var color = 'hsla(' + orbitAngle / (Math.PI / 180) + ', 100%, 50%, ' + t + ')';
        drawDoodad(doodadCtx, sliceCtx, radius, interpolator, t, color);
        canvasCtx.translate(xPos, yPos);
        canvasCtx.rotate(angle);
        canvasCtx.drawImage(doodadCtx.canvas, 0, 0, radius * 2, radius * 2, -radius, -radius, radius * 2, radius * 2);
        canvasCtx.rotate(-angle);
        canvasCtx.translate(-xPos, -yPos);
    });
    requestAnimationFrame(function() {
        animate(iteration + 1, doodadCtx, canvasCtx, sliceCtx, interpolator);
    });
}

function drawDoodad(doodadCtx, sliceCtx, radius, interpolator, t, color) {
    doodadCtx.clearRect(0, 0, radius * 2, radius * 2);
    drawSlice(sliceCtx, radius, interpolator, t, color);
    // begin top left
    doodadCtx.drawImage(sliceCtx.canvas, 0, 0, radius, radius, 0, 0, radius, radius);
    // end top left
    // begin top right
    doodadCtx.translate(radius * 2, 0);
    doodadCtx.rotate(Math.PI / 2);
    doodadCtx.drawImage(sliceCtx.canvas, 0, 0, radius, radius, 0, 0, radius, radius);
    doodadCtx.rotate(-Math.PI / 2);
    doodadCtx.translate(-radius * 2, 0);
    // end top right
    // begin bottom
    doodadCtx.translate(radius * 2, radius * 2);
    doodadCtx.rotate(Math.PI);
    doodadCtx.drawImage(doodadCtx.canvas, 0, 0, radius * 2, radius, 0, 0, radius * 2, radius);
    doodadCtx.rotate(-Math.PI);
    doodadCtx.translate(-radius * 2, -radius * 2);
    // end bottom
}

function drawSlice(ctx, radius, interpolator, t, color) {
    ctx.clearRect(0, 0, radius, radius);
    ctx.strokeStyle = '#dedede';
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(2, radius);
    var curveFactor = interpolator(t);
    var x0 = 2;
    var y0 = radius - radius * curveFactor + 2;
    var x1 = radius - radius * curveFactor + 2;
    var y1 = 2;
    var x2 = radius;
    var y2 = 2;
    ctx.bezierCurveTo(x0, y0, x1, y1, x2, y2);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
}

编译

CSS

HTML

circling-squares-1.0.0

CANVAS

编辑器支持Emmet

快捷键

circling-squares-1.0.0

CANVAS

CANVAS 用0和1组成的螺旋形动画

CANVAS 使用实时凸包算法实现一个有生命力的包围圈动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：