canvas 2d api 如何绘圆
时间: 2024-10-18 22:11:04 浏览: 47
Canvas 2D API 是 HTML5 标准中的一部分,它提供了一种在 Web 页面上绘制图形的方式。要使用 Canvas 2D API 绘制圆形,可以使用以下代码:
```javascript
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
// 获取 2D 绘图上下文
var ctx = canvas.getContext("2d");
// 设置圆形属性
ctx.fillStyle = "red"; // 填充颜色
ctx.strokeStyle = "black"; // 边框颜色
ctx.lineWidth = 2; // 边框宽度
// 绘制圆形
ctx.beginPath(); // 开始路径
ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 绘制圆形
ctx.fill(); // 填充圆形
ctx.stroke(); // 绘制边框
ctx.closePath(); // 结束路径
```
上述代码中,先获取了 canvas 元素和 2D 绘图上下文,然后设置了圆形的属性,包括填充颜色、边框颜色和边框宽度。接着使用 `beginPath()` 方法开始路径,使用 `arc()` 方法绘制圆形,并使用 `fill()` 方法填充圆形,使用 `stroke()` 方法绘制边框,最后使用 `closePath()` 方法结束路径。
阅读全文
相关推荐


















