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

<强> Live Demo

是否可以在html5画布上移动已绘制的形状？

1 个答案: