学习canvas_canvas 画扇形和圆形区别是什么-CSDN博客

本文链接：https://blog.csdn.net/fuxinyu1/article/details/108648539

学习canvas

圆弧

绘制圆弧或者圆，我们使用arc()方法。

语法

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数

x:圆弧中心（圆心）的 x 轴坐标。

y:圆弧中心（圆心）的 y 轴坐标。

radius:圆弧的半径

startAngle：圆弧的起始点， x轴方向开始计算，单位以弧度表示。

endAngle：圆弧的终点，单位以弧度表示。

anticlockwise（可选）：可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:

弧度=(Math.PI/180)*角度。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

moveTo(x, y)

将当前窗口移动到指定的坐标位置。

x :是要移动到的位置横坐标
y: 是要移动到的位置纵坐标

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    // 获取canvas
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d"); // 建立一个二维渲染上下文。
    ctx.fillStyle = 'orange';
    ctx.beginPath() //是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
    ctx.arc(50, 50, 50, 0, 2 * Math.PI);
    ctx.fill(); //通过填充路径的内容区域生成实心的图形。
</script>

</html>

canvas.width = width ;

设置画布的宽

canvas.height = height ;

设置画布的高

画扇形案例

案例分析

其实绘制扇形和绘制圆形是一样的，只不过是弧度大小的问题。

1.首先要知道每绘制一个扇形，xy的坐标还有半径是不需要改变的，只需要使用for循环计算好每次开始的角度(startAngle)和结束的角度endAngle()

// 获取canvas的宽度和高度 然后除2得到原点
var x = ctx.canvas.width / 2;
var y = ctx.canvas.height / 2;

2.要改变的是开始的角度(startAngle)和结束的角度endAngle()

Math.PI * 2 是360度
Math.PI * 2 / num;(份数) 就是每份的弧度

上一次绘制的结束弧度等于当前次的起始弧度

遇到的问题

在我写的时候忘记设置了一个属性就变成了这样

在这里插入图片描述

是因为我没有设置绘制的起始位置

  ctx.moveTo(x, y);

完整代码

  function sector(num, radius) {
    // 获取canvas的宽度和高度 然后除2得到原点
    var x = ctx.canvas.width / 2;
    var y = ctx.canvas.height / 2;
    /*
      Math.PI * 2 是360度
      Math.PI * 2 / num; 就是每份的弧度
    */
    var angle = Math.PI * 2 / num;
    //上一次绘制的结束弧度等于当前次的起始弧度
    for (var i = 0; i < num; i++) {
      // i为第几个 然后乘长几个
      // 开始弧度
      var startAngle = i * angle;
      // 结束弧度
      var endAngle = (i + 1) * angle;
      // 绘制线
      ctx.beginPath();
      // 从那个点开始画
      ctx.moveTo(x, y);
      // 起点开始 然后半径是多少 开始位置 和结束弧度
      ctx.arc(x, y, radius, startAngle, endAngle);
      // 背景颜色
      ctx.fillStyle = (i % 2 == 0) ? '#00BFFF' : '#1E90FF';
      // 填充颜色
      ctx.fill();
    }
  }