介绍Canvas

Canvas 是 HTML5 新增的标签，它可以让开发者绘制二维图形或三维图形。通过 JavaScript 在一个画布上绘制图形、动画、游戏等。

绘制圆

在 Canvas 上绘制圆形，API 中提供了一个函数：arc(x, y, r, start, end)，其参数含义为：

  • x: 圆心的 x 轴坐标
  • y: 圆心的 y 轴坐标
  • r: 圆半径
  • start: 以弧度计的开始角度
  • end: 以弧度计的结束角度

代码实现

以下是绘制圆的代码实现： 

    // 获取 canvas 元素
    let canvas = document.getElementById('myCanvas');
    // 获取 2D 上下文
    let ctx = canvas.getContext('2d');
    // 设置圆形的填充颜色
    ctx.fillStyle = 'red';
    // 以坐标 (100, 100) 为中心，半径为 50 的圆
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    // 填充圆形
    ctx.fill();
在这段代码中，我们获取了 Canvas 元素，然后获取了2D上下文，接下来我们设置了填充圆形的颜色，圆心坐标为 (100,100)， 半径为50。 通过填充圆形的方式绘制圆。