js canvas 中心旋转

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

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const rotationAngle = Math.PI / 4; // 45 degrees

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

    ctx.save(); // Save the current state
    ctx.translate(centerX, centerY); // Move to the center
    ctx.rotate(rotationAngle); // Rotate around the center
    ctx.translate(-centerX, -centerY); // Move back

    // Draw a rectangle centered at (centerX, centerY)
    ctx.fillStyle = 'blue';
    ctx.fillRect(centerX - 50, centerY - 50, 100, 100);

    ctx.restore(); // Restore the state before transformations
}

draw();