在下面的代码中，我在中心画了一个圆，但是因为它是缩放的，圆在右下角!
var canvas = document.getElementById('mycanvas');
context = canvas.getContext("2d");
context.canvas.width = 400;
context.canvas.height = 200;
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
var scale = 2;
context.scale(scale, scale);
context.beginPath();
context.fillStyle = "#ff2626"; // Red color
context.arc(context.canvas.width / 2, context.canvas.height / 2, 10, 0, Math.PI * 2); //center
context.fill();
context.closePath();canvas {
border: solid 1px #ccc;
}<HTML>
<body>
<canvas id="mycanvas"></canvas>
</body>
</HTML>您可能知道， Canvas 的宽度和高度与其内部绘制的内容无关，尤其是在缩放时。换句话说，当您使用 context.scale(scale_x, scale_y); 缩放 Canvas 时，它将缩放 Canvas 内的所有形状。我想知道，有什么方法可以获取 Canvas 像素范围吗？
我想知道缩放 Canvas 时左边缘和右边缘的 X 以及顶部和底部边缘的 Y。
最佳答案
将坐标除以 scale 应该可以解决问题:
var canvas = document.getElementById('mycanvas');
context = canvas.getContext("2d");
context.canvas.width = 400;
context.canvas.height = 200;
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
var scale = 2;
context.scale(scale, scale);
context.beginPath();
context.fillStyle = "#ff2626"; // Red color
context.arc(context.canvas.width /2/scale, context.canvas.height / 2/scale, 10, 0, Math.PI * 2); //center
context.fill();
context.closePath();canvas {
border: solid 1px #ccc;
}<HTML>
<body>
<canvas id="mycanvas"></canvas>
</body>
</HTML>附带说明一下，context.canvas.width/(2*scale) 比 context.canvas.width/2/scale 更干净，但我保留了它只是为了显示按 scale 划分。
关于javascript - 如何在缩放 Canvas 中获取像素范围？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57997138/