Показать сообщение отдельно
  #16 (permalink)  
Старый 24.12.2021, 18:17
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

Teamur,
Матрицы трансформации надо:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Matrix</title>
</head>
<body>
    
<canvas id="canvas" width=600 height=300 style="outline:1px solid"></canvas>

<script>
class Path extends Path2D {
    constructor(radius, vertices) {
        super();
        for (let A = 2 * Math.PI / vertices, a, i = 0; i < vertices; i++) {
            a = i * A;
            this.lineTo(radius * Math.cos(a), radius * Math.sin(a));
        }
        this.closePath();
    }
}
class Polygon {
    constructor(x, y, path) {
        this.path = path;
        this.matrix = new DOMMatrix();
        this.translate(x, y);
        this.rotate(0);
        this.scale(1);
    }
    translate(x, y) {
        this.matrix.translateSelf(x, y);
    }
    rotate(angle) {
        this.matrix.rotateSelf(angle);
    }
    scale(factor) {
        this.matrix.scaleSelf(factor);
    }
    render(ctx, color) {
        ctx.save();
        ctx.setTransform(this.matrix);
        ctx.strokeStyle = color;
        ctx.stroke(this.path);
        ctx.restore();
    }
}

const ctx = canvas.getContext('2d');

let path1 = new Path(50, 5);
let path2 = new Path(100, 10);

let polygon1 = new Polygon(150, 100, path1);
    polygon1.rotate(-90);
    polygon1.render(ctx, 'green');

let polygon2 = new Polygon(450, 100, path1);
    polygon2.render(ctx, 'blue');

let polygon3 = new Polygon(300, 150, path2);
    polygon3.render(ctx, 'red');

setTimeout(() => {
    polygon3.translate(0, -50);
    polygon3.scale(0.5);
    polygon3.render(ctx, 'gray');
}, 3000);
</script>

</body>
</html>
Ответить с цитированием