使用canvas画一个椭圆（正弦波和余弦波）

我们正常在canvas上画一个椭圆形可以使用 ctx.ellipse api

// 获取canvas元素
var canvas = document.getElementById('myCanvas');
// 获取绘图上下文
var ctx = canvas.getContext('2d');

// 设置椭圆的中心坐标和半径
var x = canvas.width / 2;
var y = canvas.height / 2;
var radiusX = 100;
var radiusY = 50;

// 开始路径
ctx.beginPath();
// 绘制椭圆
ctx.ellipse(x, y, radiusX, radiusY, 0, 0, 2 * Math.PI);
// 设置样式
ctx.fillStyle = 'green';
// 填充椭圆
ctx.fill();
// 结束路径
ctx.closePath();

但是我们如果不使用api我们需要怎么画一个椭圆呢

首先我们看一下正弦波和余弦波的波形图

// 根据波形图我们知道
Math.sin(0) 0
Math.sin(Math.PI / 2) 1

Math.cos(0) 1
Math.cos(Math.PI / 2) 0

那么我们可以根据波形图规律来循环正弦和余弦波

x坐标从0->1 我们加上一个基础的半径

y坐标从1->0 同样加上一个基础的半径

这样我们就可以划出一个椭圆形

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const centerX = canvas.width / 2
const centerY = canvas.height / 2
const a = 150
const b = 100
const step = Math.PI / 180 // 每一度的弧度 canvas中是用弧度计算

ctx.beginPath()
for (let angle = 0; angle <= 2 * Math.PI; angle += step) {
const x = centerX + a * Math.cos(angle)
const y = centerY + b * Math.sin(angle)
ctx.lineTo(x, y)
}
ctx.closePath()

ctx.fill();

这样我们就在canvas中画了一个椭圆