在畫布上移動一隻海龜

-4

我有一個任務，我有多個問題。在畫布上移動一隻海龜

簡而言之，我們需要將一隻烏龜在畫布上向前/向後旋轉，並以給定的量向右/向左旋轉。

海龜移動時，當他到達它出現在另一邊

現在我的問題之一是帆布到底能留下「痕跡」在他身後（彩色線或某事）我怎樣才能移動龜沒有重畫整個畫布，因爲我不能失去海龜「追蹤」，當他移動

另一件事是，我沒有問題在4「正常」的方向移動它，並出現和另一方面，但我認爲我們需要能夠旋轉它的任何程度和移動它的方向，我真的不知道如何做到這一點

我的代碼是不是很先進的，因爲這些原因，我只有畫布和我從中得到我的參數的形式

我真的不知道還有什麼要說的，如果有必要，我會包括所有的代碼我已經

UPDATE：

我覺得對於第一個問題關於重繪的畫布，我可以使用clearRect(locX,locY,imgWidth,imgHeight)，所以我清除該圖像的繪製和它旁邊只圖像的區域，但如果我錯了我打開提示

來源

2013-10-21 spd92

我不知道帆布，但對於跟蹤的方法可能是保存有什麼繪製每個「框架」，清除所有畫布並重新繪製所有內容，再加上新位置，存儲並重復;）旋轉時，您可以查看極座標。一個角度和一個長度。你知道，矢量數學...有關於矢量的這個教程，雖然處理，你可能會發現很有用的http://natureofcode.com/book/chapter-1-vectors/ –

thx ...對於旋轉，我發現一個非常類似的帖子，球從牆上彈起，就像在你的鏈接，他也給出了完成的一個，但我不知道他在哪裏計算新運動的軌跡和路徑......這裏是我發現[http://stackoverflow.com/questions/4697041/rotating-and-moving-an-image-in-a-canvas-element] – spd92

您可以使用2 ove畫布更容易顯示你的烏龜和你的軌道。

將您的曲目放在底部畫布上（無需清除/擦除底部畫布）。

把你的烏龜放在最上面的畫布上（總是清除這個畫布並重新繪製烏龜在它的新位置）。

這裏的HTML：

<div id="wrapper"> 
    <canvas id="canvasBottom" width=300 height=200></canvas> 
    <canvas id="canvasTop" width=300 height=200></canvas> 
</div>

下面是用於重疊2個畫布的CSS：

#wrapper{ 
    position:relative; 
    width:300px; 
    height:200px; 
} 
#canvasTop,#canvasBottom{ 
    position:absolute; top:0px; left:0px; 
    border:1px solid green; 
    width:100%; 
    height:100%; 
} 
#canvasTop{ 
    border:1px solid red; 
}

要旋轉你的龜，看看如何context.translate和上下文結合本教程。旋轉顯示旋轉物體：

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/

要移動你的龜沿着直線路徑，開始了本教程如何動畫對象：

http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/

來源

2013-10-21 18:59:36 markE

在畫布上移動一隻海龜

回答

相關問題