3

注: 一度に 1 つの図形だけを移動したい

Circle.prototype.create = function(){
    if ( this.canvas === null ){
        throw "Circle has no canvas";
    }
    if (this.canvas.getContext){
        this.context = this.canvas.getContext("2d");
        this.context.fillStyle = this.color;
        this.context.beginPath();
        this.context.arc(this.x,this.y,this.r,0,Math.PI*2);
        this.context.closePath();
        this.context.fill();
    }
}

これは円を描きます.context変数がオブジェクトプロパティとして保存されていることに注意してください.

元の円を使用してこの既存の円を移動するこの関数を作成しましたcontext

Circle.prototype.move_to = function(x,y){
    if (this.context === null){
        throw "Circle has no context to move";
    }
    this.x = x; this.y = y;
    this.context.translate(x, y);
    this.context.beginPath();
    this.context.arc(this.x,this.y,this.r,0,Math.PI*2);
    this.context.closePath();
    this.context.fill();
}

ただし、これはまだ別の円を描画するだけです。

既存のものを移動するにはどうすればよいですか？

原作をクリアせずにもう一枚描く！

4

1 に答える 1

4

これは私の別の回答からコピーされたものですが、短い答えはそれができないということです。あなたができることは、そのようなオブジェクトに情報を保存することです。

var rectangle = {x:10,y:20,width:20,height:40};

次に、任意の値を変更して再描画できます。最初にキャンバスをクリアするか、少なくとも再描画するキャンバスのその部分をクリアする必要があります。

//clear the canvas then draw
rectangle.width = 60;
ctx.fillRect(rectangle.x,rectangle.y,rectangle.width,rectangle.height);

ライブデモ

于 2012-06-13T12:43:34.870 に答える