html canvas 坐标不同

Question

我制作了 2 个参考尺寸 html canvas 到绘图

第一个 canvas = 宽度：400px，高度：200px
第二个 canvas = 宽度：200px，高度：100px

现在，当我在第一个 html canvas 绘图时，我将那个坐标 (x1,y1,x2,y2) 发送到第二个 canvas。

当第一个 canvas 坐标在第二个 canvas 中发送时，它不在与第一个 canvas 相同的位置绘制。

有没有办法在不改变 canvas 宽度和高度的情况下使第一个 canvas 坐标等于第二个坐标。

ctx.beginPath(); 
ctx.lineWidth = 5; 
ctx.lineCap = 'round'; 
ctx.strokeStyle = "red"; 
ctx.moveTo(coord.x, coord.y); 
ctx.lineTo(ncoord.x , ncoord.y); 
ctx.stroke(); 


//SECOUND CANVAS
ctx2.beginPath(); 
ctx2.lineWidth = 5; 
ctx2.lineCap = 'round'; 
ctx2.strokeStyle = "red"; 
ctx2.moveTo(coord.x, coord.y); 
ctx2.lineTo(ncoord.x , ncoord.y); 
ctx2.stroke();

当用户在 canvas 1 中行驶时，我将该坐标发送给两个 canvas。但在第二个 canvas 中没有绘制在与 canvas 1 相同的位置。注意：canvas 1 和 2 的宽度和高度不同。

我需要在不改变两者宽度高度的情况下解决这个问题 canvas。

Answer 1

我希望我做出了正确的假设来回答您的问题。我创建了两个不同大小的 canvases。坐标只适合第一个，更大的 canvas。

您可以将较大 canvas 的宽度或高度除以较大 canvas 的宽度或高度，从而将 'big' 坐标转换为 'small' 坐标。例如，大的 canvas 的高度为 200，而小的高度为 100。如果除以 100 / 200，则得到 0.5。 'small' 坐标应该是原来坐标的一半高。自己看下面：

//just for testing purposes
var coord = {
  x: 320,
  y: 125
};
var ncoord = {
  x: 220,
  y: 90
};

function drawBig() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.strokeStyle = "red";
  ctx.moveTo(coord.x, coord.y);
  ctx.lineTo(ncoord.x, ncoord.y);
  ctx.stroke();

}

function drawSmall() {
  let bigCanvas = document.getElementById("canvas1");
  let smallCanvas = document.getElementById("canvas2");

  //Devide the dimensions of the big and small canvas in order to get the magnification factor:
  let widthDimension = smallCanvas.width / bigCanvas.width;
  let heightDimension = smallCanvas.height / bigCanvas.height

  var ctx2 = smallCanvas.getContext("2d");
  ctx2.beginPath();
  ctx2.lineWidth = 5;
  ctx2.lineCap = 'round';
  ctx2.strokeStyle = "red";

  //Transform the original coordinates to the right dimensions:
  ctx2.moveTo(coord.x * widthDimension, coord.y * heightDimension);
  ctx2.lineTo(ncoord.x * widthDimension, ncoord.y * heightDimension);
  ctx2.stroke();

}

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" width="400" height="200"></canvas>
<hr>
<canvas id="canvas2" width="200" height="100"></canvas>


<button onclick="drawBig()">draw big canvas</button>
<button onclick="drawSmall()">draw small canvas</button>

希望对您有所帮助！如果没有，请评论

html canvas 坐标不同

Different html canvas coordinates

html

javascript

drawing

canvas

html5-canvas