画布从底部中心图像角度旋转？

在前端开发中，可以使用CSS或JavaScript来实现画布从底部中心图像角度旋转。以下是一个简单的示例：

CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.canvas {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

JavaScript：

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

const image = new Image();
image.src = 'your-image-url';
image.onload = () => {
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate((Math.PI / 180) * 45); // 旋转45度
  ctx.drawImage(image, -image.width / 2, -image.height / 2);
};

这个示例中，我们首先创建了一个画布，并设置了其宽度和高度。然后，我们使用getContext()方法获取到2D上下文，并使用translate()方法将原点移动到画布的中心。接着，我们使用rotate()方法旋转画布，并使用drawImage()方法绘制图像。

这样，我们就可以实现画布从底部中心图像角度旋转的效果。