设置画布的“内部”尺寸？

Question

我可以通过设置width和height属性来设置画布的宽度和高度，如下所示：

<canvas id="canvas" width="510" height="510"></canvas>

但我不想将所有绘图代码硬编码以依赖这些值。我想将“内部”宽度/高度设置为100x100，然后在这些坐标中绘制所有内容，并让画布对其进行缩放（就像我在OpenGL中所做的那样）。这样，如果我重新调整画布大小，它仍然可以呈现出漂亮的效果。

我发现，如果我在画布上设置CSS宽度和高度，我可以使它变大，但保持相同的单位，但我发现它实际上会拉伸结果并模糊且看起来很糟糕（我认为它仍然会呈现为矢量图形，漂亮而清晰）。

有没有方法可以解决这个问题？

- mpen

Answer 1

你可以使用“本地”坐标绘制所有内容，然后在绘制时首先按实际画布的相对大小缩放上下文。

例如：

HTML

<canvas id="c" width="510" height="510"></canvas>

JS

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

ctx.scale(5.1,5.1);
// Everything drawn here is in a 100x100 world, 
// but gets scaled to be in the 510x510 canvas
ctx.fillStyle = '#000';
ctx.fillRect(0,0,100,100);
ctx.strokeStyle= '#F00';
ctx.lineWidth = 1;
ctx.strokeRect(5,5,90,90);​​​​​

示例运行

- jimr

---

啊哈！scale！这正是我在寻找的。谢谢！还要缩小线宽，这样看起来就不会太大了。在这种情况下，如果我想保持1像素的描边，则为1/5.1。 - mpen