用canvas画一轮弯月

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

写在前面

本文用canvas画一轮弯月。

代码块

代码说明

1. 创建一个canvas画布

<canvas id="Canvas" width="400" height="400"> </canvas>

2. 设置线条颜色和样式

const canvas = document.getElementById("Canvas");
this.ctx = canvas.getContext("2d");

this.ctx.lineCap = "round"; // 设置线条结束样式
this.ctx.lineJoin = "round"; // 线条与线条接合处的样式
this.ctx.strokeStyle = "#eee4c9"; // 设置线条颜色

3. 绘制第一个圆弧

将一整段圆弧拆分成100个小圆弧，使用帧动画进行绘制。

this.startA = -(Math.PI * 3) / 4; // 第一个圆弧的开始角度
this.endA = (Math.PI * 3) / 4; // 第一个圆弧的结束角度
this.changeA = Math.PI / 100; // 每一小段圆弧的变化角度
this.sAngle = this.startA; // 一小段圆弧的开始角度
this.eAngle = this.sAngle + this.changeA; // 一小段圆弧的结束角度
this.drawArcProcess(); // 开始绘制

drawArcProcess() {
  this.ctx.arc(200, 200, 160, this.sAngle, this.eAngle, false); // 绘制的半径、圆心、开始角度、结束角度、顺时针
  this.ctx.stroke(); // 绘制

  this.sAngle = this.eAngle; // 接下来一小段圆弧的开始角度是上一段圆弧的结束角度
  this.eAngle = this.sAngle + this.changeA; // 接下来一小段圆弧的结束角度

  if (this.eAngle > this.endA) { // 如果小段的结束角度＞总的结束角度，就让他等于总的结束角度
    this.eAngle = this.endA;
  }
  if (this.sAngle < this.endA) { // 如果开始角度<总的结束角度，才进行圆弧的绘制，否则代表第一段圆弧绘制完成，开始绘制第二段圆弧
    requestAnimationFrame(this.drawArcProcess);
  } else {
    // 此处开始绘制第二个圆弧
    this.startA = Math.PI / 2;
    this.endA = -Math.PI / 2;
    this.sAngle = this.startA;
    this.eAngle = this.sAngle - this.changeA;
    this.drawArcProcess2();
  }
},

4. 绘制第二个圆弧

和第一个圆弧一个道理，就是一些参数设置改变了一下。以及计算了一下第二个圆弧的半径和圆心位置。

drawArcProcess2() {
  let rVal = Math.sqrt(160 * 80);
  this.ctx.arc(200 - rVal, 200, rVal, this.sAngle, this.eAngle, true); // 绘制的半径、圆心、开始角度、结束角度、逆时针
  this.ctx.stroke();

  this.sAngle = this.eAngle;
  this.eAngle = this.sAngle - this.changeA;

  if (this.eAngle < this.endA) {
    this.eAngle = this.endA;
  }
  if (this.sAngle >= this.endA) {
    requestAnimationFrame(this.drawArcProcess2);
  }
},

写在最后

以上就是所有的代码说明。