javascript - 在 Canvas2d HTML5 中放大和缩小不起作用

Question

我有一个 Canvas2d 播放视频，通过在播放视频时在画布上绘制每一帧。播放视频的功能如下所示：

function videoPlay() {
   socket = io();
   var timer_var = setInterval(myTimer, 10000);
   socket.on('start', function () {
     var canvasVideo = document.getElementById('canvas1');
     var ctxVideo = canvasVideo.getContext("2d");
     var streamingSource = parseInt("<%= Streaming_Source %>");
     divSocket = io(location.origin + "/cam" + streamingSource);
     divSocket.on('data', function (data) {
       var bytes = new Uint8Array(data);
       var blob = new Blob([bytes], {type: 'application/octet-binary'});
       var url = URL.createObjectURL(blob);
       var img = new Image;
       img.onload = function () {
          URL.revokeObjectURL(url);
          ctxVideo.drawImage(img, 0, 0, canvasVideo.width, canvasVideo.height);
        };
      img.src = url;
   }
 }
}

这是我的 HTML：

<div class="div_2_1_canvas">
   <canvas id='canvas2' width='920' height='680' class="w-100" style='position:relative'> 
   </canvas>
   <div class="zoom-buttons">
     <input type="button" id="plus" value="+" style="width: 35px; height: 35px; position: absolute; left: 75%; bottom: 43%; border-radius: 50%; border: 1px solid white; background-color: white; text-align: center;"></input>
  
     <input type="button" id="minus" value="-"style="width: 35px; height: 35px; position: absolute; left: 75%; bottom: 40%; border-radius: 50%; border: 1px solid white; background-color: white">
   </div>
</div>

最后，这就是我的缩放/缩放功能的样子：

var scale = 1.0;
var scaleMultiplier = 0.8;

var translatePos = {
    x: canvasVideo.width / 2,
    y: canvasVideo.height / 2
};
                        
document.getElementById("plus").addEventListener("click", function (e) {
  scale /= scaleMultiplier;
  var canvasVideo = document.getElementById('canvas1');
  var ctxVideo = canvasVideo.getContext("2d");
  ctxVideo.translate(translatePos.x, translatePos.y);
  ctxVideo.scale(scale, scale);
}, false);
                        
document.getElementById("minus").addEventListener("click", function () {
   scale *= scaleMultiplier;
   var canvasVideo = document.getElementById('canvas1');
   var ctxVideo = canvasVideo.getContext("2d");
   ctxVideo.translate(translatePos.x, translatePos.y);
   ctxVideo.scale(scale, scale)
}, false);                       

放大时效果很好，但是当我缩小并且比例值变得小于 0.5 时，视频会变得混乱，看起来像这样：

知道为什么会发生这种情况以及如何解决吗？

标签： javascripthtmlcsscanvashtml5-canvas