是否可以在html5畫布上移動已繪製的形狀？

注：我只是想在一個時間是否可以在html5畫布上移動已繪製的形狀？

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

這打圈移動1種形狀，注意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(); 
}

但是，這只是繪製另一個圓圈。

我怎樣才能讓它移動現有的？

沒有清除原來的和繪圖的另一個！

來源

2012-06-13 AlexMorley-Finch

你不能，你需要（例如）在內存中擁有一個畫布，這將被清零，重新繪製並複製到畫布上可見每一幀。看看 - https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations – Yaniro

看一下像[Fabric.js]（http://fabricjs.com）這樣的畫布庫， – kangax

這是從我的另一個答案複製，但簡短的答案是你不能這樣做。你可以做的就是將信息存儲在一個對象中。

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

來源

2012-06-13 12:43:34 Loktar

是否可以在html5畫布上移動已繪製的形狀？

回答

相關問題