js canvas 旋转图片

// 获取Canvas元素和绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建一个新的Image对象
const img = new Image();
img.src = 'path/to/your/image.jpg';

// 图片加载完成后执行旋转操作
img.onload = function() {
    // 设置Canvas的中心点为旋转中心
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    // 清空Canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 保存当前的绘图状态
    ctx.save();

    // 平移到旋转中心
    ctx.translate(centerX, centerY);

    // 旋转图片（45度）
    ctx.rotate(Math.PI / 4);

    // 绘制图片（相对于旋转中心）
    ctx.drawImage(img, -img.width / 2, -img.height / 2);

    // 恢复之前保存的绘图状态
    ctx.restore();
};