0

マウスで長方形を定義して、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);
4

1 に答える 1

0 
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に呼び出す必要があります。strokefill

于 2012-10-18T22:14:34.070 に答える