Question

我有两层。一层很大，另一层很小。因此，为了将小层与大层对齐，我将小层缩放到大层的大小。

缩放在顶部/左侧工作，但在底部/右侧，它不能像我希望的那样工作：它看起来不是在所有方向上均匀缩放。

我这样做：

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
    var imageObject1=new Image();
    imageObject1.onload=function(){
       context1.clearRect(0,0,imageObject1.width,imageObject1.width);      
       context1.scale(1.0927,1.0956);
       context1.drawImage(imageObject1,0,0);
    }
    imageObject1.src=canvas.toDataURL();

JsFiddle of problem：https://jsfiddle.net/7cufxf6d/

知道如何解决这个问题吗？

Answer 1

你的抵消和比例似乎是错误的。在您的代码中，它们是硬编码的，然后使用硬编码值再次移动。您可能希望重新调查这些值以及获取它们的方式。

使用浮点值时缩放（使用画布的变换矩阵）可能会引入更多的舍入错误，而不是使用drawImage提供的更多固定边界。由于您已经对这些值进行了硬编码，因此您可以节省一些工作（和内存），并在绘制图像时移动和缩放图像（请参阅：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage）：
ctx.drawImage(image, dx, dy, dWidth, dHeight)

我略微修改了你的小提琴：

＆＃13;

// Silver Layer
var canvas0 = document.getElementById("layer1");
var context0 = canvas0.getContext("2d");

var imageObject0 = new Image();
imageObject0.crossOrigin = "anonymous";
imageObject0.onload = function() {
  document.getElementById('layer1').width = imageObject0.width;
  document.getElementById('layer1').height = imageObject0.height;
  context0.clearRect(0, 0, imageObject0.width, imageObject0.width);
  //    context.scale(1.5,1.5);
  context0.drawImage(imageObject0, 0, 0);

};
imageObject0.src = 'https://i.imgur.com/tIaNJku.png';
// Black Layer    
var canvas1 = document.getElementById("layer2");
var context1 = canvas1.getContext("2d");

var imageObject1 = new Image();
imageObject1.crossOrigin = "anonymous";
imageObject1.onload = function() {
  document.getElementById('layer2').width = imageObject1.width;
  document.getElementById('layer2').height = imageObject1.height;
  context1.clearRect(0, 0, imageObject1.width, imageObject1.width);
  //context1.scale(1.0927,1.0956);
  context1.drawImage(imageObject1, -65, -10, 3020, 2680); // MODIFIED LINE

  //REMOVED SHIFT
};
imageObject1.src = 'https://i.imgur.com/29aRnzv.png'; //black

＆＃13;

<div style="position: relative;">
  <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
  <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

＆＃13;

javascript - 在各个方向缩放画布

1 个答案: