-3

我有一个任务，我有多个问题。

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

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

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

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

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

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

更新：

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

4

1 回答 1

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/

于 2013-10-21T18:59:36.177 回答