可调整大小的椭圆 html5 画布

Question

我试图通过鼠标定义一个矩形在 html5 画布上绘制一个椭圆。我可以做到这一点，但使用我当前的方法，椭圆不适合我的边界矩形。我如何绘制这个椭圆，使其完全适合它的边界矩形？

这是我所拥有的：

    var a1x = self.x;
    var a1y = self.y - self.h / 2;

    var a2x = self.x;
    var a2y = self.y + self.h / 2;

    var c1x = self.x + self.w / 2;
    var c1y = self.y - self.h / 2;
    var c2x = self.x + self.w / 2;
    var c2y = self.y + self.h / 2;

    var c3x = self.x - self.w / 2;
    var c3y = self.y + self.h / 2;
    var c4x = self.x - self.w / 2;
    var c4y = self.y - self.h / 2;

    context.beginPath();
    context.moveTo(a1x, a1y);

    context.bezierCurveTo(
        c1x, c1y,
        c2x, c2y,
        a2x, a2y
    );

    context.bezierCurveTo(
        c3x, c3y,
        c4x, c4y,
        a1x, a1y
    );

    context.fillStyle = "red";
    context.fill();
    context.closePath();
    context.strokeRect(this.x - this.w / 2, this.y - this.h / 2, this. w, this.h);

Answer 1

CanvasRenderingContext2D.prototype.ellipse =
    CanvasRenderingContext2D.prototype.ellipse ||
        function(x, y, width, height)
        {
            this.save();
            this.translate(x - width/2, y - height/2);
            this.scale(width, height);
            this.arc(0, 0, 1, 0, 2 * Math.PI, false);
            this.restore();
        };

CanvasRenderingContext2D.prototype.circle =
    CanvasRenderingContext2D.prototype.circle ||
        function(x, y, radius)
        {
            this.arc(x, y, radius, 0, 2 * Math.PI, false);
        };

您必须先调用beginPath，然后调用stroke 或fill，才能看到它们，就像任何其他路径元素一样。