是否有可能移动已经绘制的形状HTML5的画布上的？

Question

注意：我一次只想移动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();
}

但是，这仅画了另一个圆圈。

我该如何移动现有的？

无需清除原始文件并绘制另一个！

Answer 1

这是从另一个我的答案复制的，但简单的答案是，你不能这样做。 您可以做的就是将信息存储在这样的对象中。

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);

现场演示