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 回答