1

我试图在比例为 1x1 的虚拟画布上绘制，这样我就不必不断地乘以实际尺寸。

这在我绘制圆圈时效果很好，但它看起来好像不适用于矩形，我不知道为什么。

当我有以下代码时：

var canvas = this.canvas;
var ctx = canvas.getContext("2d");
ctx.scale(this.canvas.width, this.canvas.height);

ctx.beginPath();
ctx.arc(.5, .5, .1, 0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();

它工作正常，圆圈随画布缩放。

但是，当我只是将其更改为以下内容时：

var canvas = this.canvas;
var ctx = canvas.getContext("2d");
ctx.scale(this.canvas.width, this.canvas.height);

ctx.fillStyle = "blue";
ctx.fillRect(0,0, .0001, .001);

ctx.beginPath();
ctx.arc(.5, .5, .1, 0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();

矩形占据了整个屏幕，甚至覆盖了圆圈，即使圆圈是在矩形之后绘制的。显然，它应该在画布上占据非常小的空间。

值得注意的是，这发生在游戏循环中。

但是，以下工作按预期工作，蓝色背景上方出现一个红色圆圈

var canvas = this.canvas;
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(0,0, 50, 50);

ctx.beginPath();
ctx.arc(10, 10, 20, 0, 2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();
4

1 回答 1

1

如果您在游戏循环中重复调用此方法，则该方法将在每次循环scale中增加变换的规模。所以你最终会得到一切的增长。由于您没有显示实际代码，因此很难说出为什么圆圈不受影响。

在调用之前尝试scale()只调用一次，或者使用save()and restore()，或者只是在循环开始时重置转换scale()：

ctx.setTransform(1, 0, 0, 1, 0, 0);
于 2013-06-09T18:52:45.270 回答