旋转图像并在画布上绘制

Question

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

canvas = document.createElement('canvas');
canvas.height = 1920;
canvas.width = 1080;
context = canvas.getContext('2d');
context.drawImage(videoSrc, 0, 0, 1080, 1920, 1080, -1920, 1080, 1920);
// I have been trying different combinations of above numbers
return canvas;  

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

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;