在畫布上繪圖

Question

我正在畫布上繪制圓弧，其中心點是畫布的中間點，因此，圓應從頁面的中心開始，其半徑應從屏幕的1/2到3/4的范圍。 我想出了一種方法，可以根據窗口大小調整畫布本身的大小，但是我無法讓cirlce自動調整大小。 另外我不能弄清楚半徑，使它看起來像我的規格，目前它看起來像一個延伸的圓。 我應該給半徑賦予什么值以使其再次看起來像普通圓。 還應該能夠在窗口調整大小時自行調整大小嗎？ 目前，我具有以下值：

var canvas = document.getElementById('canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var myRadius = canvas.width / 4; 
context.arc(centerX, centerY, myRadius, 0, (Math.PI/180) * 360 , false);
context.fillStyle = 'green';
context.fill()
}

Answer 1

您應該處理調整大小事件並為新的畫布尺寸重新繪制圓圈。

Answer 2

如果您將使用樣式調整畫布大小，圓圈將按您的期望進行重繪： 提琴 （實際上整個畫布將僅用作圖像：嘗試將畫布的尺寸從1000更改為100，您會明白我的意思）

CSS：

#canvas {
    height: 100%; 
    width: 100%
}

HTML：

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