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

Question

我可以通过设置width和height属性，像这样把我的画布的宽度和高度：

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

但我不想硬编码我所有的绘制代码依赖于这些值。我想将“内部”宽度/高度设置为100x100，然后在这些坐标中绘制所有内容，并将画布展开（与我在OpenGL中执行的操作相同）。这样，如果我曾经调整过我的画布，它仍然很好地呈现。

我发现如果我在画布上设置CSS宽度和高度，我可以使它更大，但保持相同的单位，但我发现它实际上拉伸了结果，模糊并看起来很糟糕（我认为它仍然呈现像一个向量，很好，清脆）。

有没有办法做到这一点？

Answer 1

您可以使用“本地”坐标绘制所有内容，然后将其作为绘制时的第一件事，然后根据实际画布的相对大小来缩放上下文。

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