javascript - 旋转图像并在 Canvas 上绘图

Question

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

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() 或任何其他翻译方法，因为我不想旋转 Canvas ，而只是从 Canvas 中的不同位置开始绘制视频。也许我错了。感谢您的阅读

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;