javascript - Is it possible to move already drawn shapes on the html5 canvas? - Stack Overflow

admin管理员组

文章数量:1415460

note: i only want to move 1 shape at a time

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

This draws a circle, Notice the context variable is saved as an object property

i've written this function to move this existing circle using the original circles 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();
}

However this just draws yet ANOTHER circle.

How can i get it to move the existing?

WITHOUT CLEARING THE ORIGINAL AND DRAWING ANOTHER!

note: i only want to move 1 shape at a time

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

This draws a circle, Notice the context variable is saved as an object property

i've written this function to move this existing circle using the original circles 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();
}

However this just draws yet ANOTHER circle.

How can i get it to move the existing?

WITHOUT CLEARING THE ORIGINAL AND DRAWING ANOTHER!

• javascript
• html
• canvas

Share Improve this question Follow asked Jun 13, 2012 at 11:08 AlexMorley-FinchAlexMorley-Finch 6,9751515 gold badges6969 silver badges106106 bronze badges 2

• 3 You can't, you need (for example) to have a canvas in memory which will be cleared, redrawn and copied to the visible canvas every frame. Check out - developer.mozilla/en/Canvas_tutorial/Basic_animations – Yaniro Commented Jun 13, 2012 at 11:15
• 1 Take a look at a canvas library like Fabric.js – kangax Commented Jun 13, 2012 at 11:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

This is copied from another of my answers but the short answer is you can't do that. What you could do is store the information in an object like so.

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

Then you can change any of the values and redraw it, you have to clear the canvas first, or at least that portion of the canvas you are redrawing to.

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

Live Demo

本文标签： javascriptIs it possible to move already drawn shapes on the html5 canvasStack Overflow