画布旋转重置比例

Question

我有转换视频的视频和画布：

<video id="v" controls loop autoplay="autoplay">
<source src="file:///clip01-sound.mp4"
        type=video/mp4>

Canvas 从视频中接收到图像：

function draw(video, context, w, h) {
    if (video.paused || video.ended) return false;
    context.drawImage(video, 0, 0, w, h);
    setTimeout(function () {
        draw(video, context, w, h);
    }, 0);
}

我有 2 个按钮：旋转和缩放

代码如下：

function makeRotate() {
    var canvas = document.getElementById('c');
    var oldW = canvas.width;
    var oldH = canvas.height;
    canvas.width = oldH;
    canvas.height = oldW;
    var ctx = canvas.getContext('2d');
    ctx.translate(canvas.width, 0);
    ctx.rotate(Math.PI / 2);
}

function makeScale() {
    var canvas = document.getElementById('c');
    var ctx = canvas.getContext('2d');
    ctx.scale(1.5, 1.5);
}

如果我单击旋转按钮并缩放，那么一切正常。 但是，如果我按正常工作的比例但随后旋转我会收到旋转的视频，但比例会重置为 1。

我的代码有什么问题，或者它是旋转函数的默认行为。如果是，我该如何更改？

谢谢

Answer 1

调整画布大小会重置它的上下文，所以如果你在调整画布大小后不应用缩放，它的缩放将是 1, 1。