Canvas Stage.js 圆到线投影动画

Circle to Line Projection

h5, canvas, line, math

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

const stage = new Stage({
    container: document.body
});

// CONFIG
const pointCount = 16;
const axisColor = '#444';
const circleColor = '#09f';
const projectionColor = '#f90';

const TAU = Math.PI * 2;
let rotation = 0;

stage.onTick = function tick({
    simTime, simSpeed, width, height
}) {
    rotation += 0.002 * simSpeed;
};

stage.onDraw = function draw({
    ctx, width, height
}) {
    const scale = Math.min(width, height) / 4;
    const centerX = width / 2;
    const centerY = height / 2;

ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, width, height);

// Center coordinate system
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.scale(scale, scale);

// Draw axes
    ctx.beginPath();
    ctx.lineWidth = 1 / scale;
    ctx.strokeStyle = axisColor;
    ctx.moveTo(-centerX, 0);
    ctx.lineTo(centerX, 0);
    ctx.moveTo(0, -centerY);
    ctx.lineTo(0, centerY);
    ctx.stroke();

// Generate points on unit circle
    const points = [];
    for (let i = 0; i < pointCount; i++) {
        const pointAngle = rotation + i / pointCount * TAU;
        points.push({
            angle: pointAngle,
            x: Math.sin(pointAngle),
            y: -Math.cos(pointAngle)
        });
    }

// Draw points
    const pointRadius = Math.max(0.02, 2 / scale);
    ctx.fillStyle = circleColor;
    points.forEach(p => {
        ctx.beginPath();
        ctx.arc(p.x, p.y, pointRadius, 0, TAU);
        ctx.fill();
    });

// Draw projection
    ctx.fillStyle = projectionColor;
    ctx.strokeStyle = projectionColor;
    ctx.lineWidth = 0.5 / scale;
    points.forEach(p => {
        const projectionX = Math.tan(p.angle / 2);
        ctx.beginPath();
        ctx.arc(projectionX, 0, pointRadius, 0, TAU);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(0, 1);
        if (p.y < 0) {
            ctx.lineTo(p.x, p.y);
        } else {
            ctx.lineTo(projectionX, 0);
        }
        ctx.stroke();
    });

ctx.restore();
};

编译

CSS

HTML

Circle to Line Projection

h5, canvas, line, math

编辑器支持Emmet

快捷键

Circle to Line Projection

h5, canvas, line, math

使用Stage.js实现立体球面投影动画

HTML5 Canvas + Hammer.js圆点矩阵平面凸起交互动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：