爲什麼我的繪圖大小相對於畫布大小？

Question

我有一個帆布定義爲

<canvas id="field"></canvas> 

的style.css：

canvas#field { 
    width: 500px; 
    height: 250px; 
    border: 3px solid black; /* for now */ 
} 

每當我試圖在上面畫的東西，像

var ctx = field.getContext("2d") 
// circle 
ctx.beginPath(); 
ctx.arc(100, 75, 50, 0, 2 * Math.PI); 
ctx.stroke(); 

它最終總是被大小相對於畫布尺寸。如果我將畫布製作成兩倍大，即使我的半徑始終爲50px，但圓形也是兩倍大。如果我將畫布做成方形，則圓形會向下拉長，反之亦然，如果我將畫布向外拉伸即可。

如何讓畫布將我給它的數字視爲絕對值？

Answer 1

爲HTML屬性的CSS規則，相反，你應該設置畫布寬度和高度：

<canvas id="field" width="500" height="250"></canvas> 

報價MDN：

的<canvas>元素只有兩個屬性，width和height。這些都是可選的，也可以使用DOM屬性進行設置。如果未指定width和height屬性，畫布最初將寬300像素，高150像素。該元素可以通過CSS任意調整大小，但在渲染過程中，圖像將按比例縮放以適應其佈局大小：如果CSS大小不考慮初始畫布的比例，則會出現扭曲。

您還可以設置width和height使用JavaScript動態：

const canvas = document.querySelector('canvas'); 
canvas.width = '500'; 
canvas.height = '250';