在画布上绘图

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>