旋转图像并在画布上绘图

Question

我一直在尝试使用不同的方法在尺寸为1080 * 1920的画布上从尺寸为1920 * 1080的视频流中绘制图像。我想将视频旋转-90º，使其完全适合画布（不通过缩小和扩展来调整原始视频的大小）。以下是我的尝试：

context.rotate()

我没有使用in_addr_t或任何其他翻译方法，因为我不想旋转画布，只是从画布中的不同位置开始绘制视频。也许我错了。感谢您的阅读

Answer 1

在绘制图片之前，您需要在上下文中致电rotate()。像这样：

canvas = document.createElement('canvas');
canvas.height = 1920;
canvas.width = 1080;

//Angle to rotate, negative for counter clockwise
degrees = 45; 

context = canvas.getContext('2d');

//Rotation calculated in radians (hence the math).
context.rotate(degrees * Math.PI / 180);

context.drawImage(videoSrc, 0, 0, 1080, 1920, 1080, -1920, 1080, 1920);

//Reset rotation
context.resetTransform();

return canvas;