我可以通过设置 width
和 height
属性来设置 Canvas 的宽度和高度,如下所示:
<canvas id="canvas" width="510" height="510"></canvas>
但我不想硬编码我所有的绘图代码以依赖于这些值。我想将“内部”宽度/高度设置为 100x100,然后在这些坐标中绘制所有内容,并让 Canvas 按比例缩小(与我在 OpenGL 中所做的方式相同)。这样,如果我调整 Canvas 大小,它仍然可以很好地呈现。
我发现如果我在 Canvas 上设置 CSS 宽度和高度我可以使它更大,但保持相同的单位,但我发现它实际上拉伸(stretch)了结果并且它模糊并且看起来很糟糕(我认为它仍然像矢量一样渲染,漂亮而清晰)。
有办法吗?
最佳答案
您可以在“本地”坐标中绘制所有内容,然后作为绘制时要做的第一件事,根据实际 Canvas 的相对大小缩放上下文。
例如
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);
关于html - 设置 Canvas 的 "internal"尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11150133/