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

时间:2012-06-22 04:22:11

标签: html5 canvas

我可以通过设置widthheight属性来设置画布的宽度和高度:

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

但我不想硬编码所有绘图代码以依赖这些值。我想将“内部”宽度/高度设置为100x100,然后在这些坐标中绘制所有内容,并将画布缩小(与我在OpenGL中的方式相同)。这样,如果我调整画布大小,它仍然很好地呈现。

我想通过如果我在画布上设置CSS宽度和高度我可以使它更大,但保持相同的单位,但我发现它实际上拉伸了结果并且它模糊并且看起来很糟糕(我还以为它仍然渲染像矢量,漂亮而清脆。

有办法做到这一点吗?

1 个答案:

答案 0 :(得分:3)

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

E.g。

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);​​​​​

Running example