在画布上移动一只海龟

-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

在画布上移动一只海龟

回答

相关问题