Question

我正在尝试在比例为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();

Answer 1

如果你在游戏循环中反复调用它，scale方法将增加变换的比例，每次循环。所以你最终会成长。由于您没有显示实际代码，因此很难说明为什么圆圈不受影响。

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

ctx.setTransform(1, 0, 0, 1, 0, 0);

上下文缩放打破了一些绘图

1 个答案: