Question

我在画布上绘制一个cirlce，其中心点是画布的中间点，因此圆圈应从页面中心开始，其半径应从屏幕的1/2到3/4。我已经找到了根据窗口大小使画布调整大小的方法，但我不能让cirlce自动调整大小。另外，我无法弄清楚半径，使它看起来像我的规格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

如果您要使用样式调整画布大小，则会按预期重绘：fiddle（实际上整个画布将仅用作图像：尝试将画布的尺寸从1000更改为100，然后您将会这样做看看我的意思）

的CSS：

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

HTML：

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

在画布上绘图

2 个答案: