在画布上移动乌龟答案

【问题标题】：moving a turtle on a canvas在画布上移动乌龟
【发布时间】：2013-10-30 01:22:50
【问题描述】：

我有一个作业有多个问题。

简单地说，我们需要在画布上向前/向后移动海龟，并以给定的量向右/向左旋转它。

乌龟在移动时会在他身后留下“痕迹”（一条彩色线或其他东西），当他到达画布的尽头时，它必须出现在另一边

现在我的一个问题是如何在不重绘整个画布的情况下移动海龟，因为当海龟移动时我不能丢失海龟的“踪迹”

另一件事是我在 4 个“正常”方向上移动它并出现在另一侧没有问题，但我认为我们需要能够将它旋转任意度数并在那个方向上移动它，我真的不知道该怎么做

由于这些原因，我的代码不是很先进，我只有画布和从中获取参数的表单

我真的不知道还能说什么，如有必要，我将包括我拥有的所有代码

更新：

我认为对于重绘画布的第一个问题，我可以使用clearRect(locX,locY,imgWidth,imgHeight)，因此我清除了图像所在的区域并仅在其旁边绘制图像，但如果我错了，我愿意接受提示

【问题讨论】：

我不了解画布，但跟踪的一种方法可能是存储正在绘制的每个“帧”，清除所有画布并重新绘制所有内容以及新位置，存储并重复； ) 对于旋转，您可以查看极坐标。一个角度和一个长度。你知道的，向量数学......虽然有这个关于向量的教程，但你可能会发现它很有用natureofcode.com/book/chapter-1-vectors
非常感谢您的帮助...对于旋转，我发现了一个非常相似的帖子，球从墙上弹起，就像在您的链接中一样，他也给出了完成的一个，但我真的不能弄清楚他在哪里计算新的运动轨迹和路径……这是我发现的 [stackoverflow.com/questions/4697041/…

标签： javascript html canvas

【解决方案1】：

您可以使用 2 个重叠的画布来更轻松地显示您的乌龟和您的足迹。

将您的曲目放在底部画布上（无需清除/擦除此底部画布）。

将你的海龟放在顶部画布上（始终清除此画布并将海龟重新绘制到新位置）。

这是 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 和 context.rotate 来显示旋转的对象：

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

要沿线性路径移动您的海龟，请从本教程开始，了解如何为对象设置动画：

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

【讨论】：