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。

画布旋转重置比例

1 个答案: