如何使用js绘制椭圆形状？

Question

我想在canvas.js或任何其他javascript中绘制椭圆形状。是否可以在canvas.js中绘制？请帮我绘制椭圆形状并编写代码。 谢谢。

Answer 1

Bellow是一个片段，展示如何实施williammalone's algorithm

＆＃13;

＆＃13;

//FROM; http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

//Fetch element
var c = document.getElementById("c");
console.log(c);
//Get 2D context
var context = c.getContext("2d");

function drawEllipse(centerX, centerY, width, height) {

  context.beginPath();

  context.moveTo(centerX, centerY - height / 2); // A1

  context.bezierCurveTo(
    centerX + width / 2, centerY - height / 2, // C1
    centerX + width / 2, centerY + height / 2, // C2
    centerX, centerY + height / 2); // A2

  context.bezierCurveTo(
    centerX - width / 2, centerY + height / 2, // C3
    centerX - width / 2, centerY - height / 2, // C4
    centerX, centerY - height / 2); // A1

  context.fillStyle = "red";
  context.fill();
  context.closePath();
}

//Fire function
drawEllipse(100, 100, 100, 200)

＆＃13;

<canvas id="c" height="200" width="200"></canvas>

＆＃13;

＆＃13;

＆＃13;