如何用HTML5的Canvas绘制空心圆和实心圆？

对于实心圆，我们使用了`fill()`方法来填充路径，我们设置了填充颜色为蓝色，并通过调用`fill()`方法来填充路径。

对于空心圆，我们使用了`stroke()`方法来描边路径，我们设置了描边颜色为红色，并通过调用`stroke()`方法来描边路径，我们还可以通过设置`lineWidth`属性来调整线宽。

当你运行这段代码时，你应该能在浏览器中看到一个蓝色的实心圆和一个红色的空心圆。

FAQs

答案： 你可以通过修改`fillStyle`或`strokeStyle`属性来改变圆的颜色，要将实心圆的颜色改为绿色，可以将`fillStyle`设置为`'green'`；要将空心圆的颜色改为紫色，可以将`strokeStyle`设置为`'purple'`。

答案： 你可以通过修改`radius`变量的值来调整圆的大小，增大`radius`的值会使圆变大，减小`radius`的值会使圆变小，确保你的值是正数，并且根据你的需求进行调整。

下面是一个使用HTML5<canvas> 元素来绘制空心圆和实心圆的示例，表格中包含了必要的HTML和JavaScript代码。

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.arc(75, 75, 50, 0, Math.PI * 2, false);

ctx.strokeStyle = 'black';

ctx.lineWidth = 5;

ctx.stroke();

`` |``javascript

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.arc(75, 75, 50, 0, Math.PI * 2, false);

ctx.fillStyle = 'red';

ctx.fill();

``` |

| 圆心坐标 | (75, 75) | (75, 75) |

| 半径 | 50 | 50 |

| 线宽 | 5 | 不适用 |

| 填充色 | 不适用 | 红色 |

在上述代码中，空心圆是通过调用stroke() 方法来绘制的，而实心圆是通过调用fill() 方法来绘制的，圆心坐标都是(75, 75)，半径都是50，空心圆的线宽设置为5，而实心圆没有设置线宽，因此它看起来是实心的。