設置畫布的「內部」尺寸？

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