Question

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

简单地说，我们需要在画布上向前/向后移动一只乌龟，向右/向左旋转一定量。

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

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

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

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

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

更新：

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

Answer 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/

在画布上移动一只乌龟

1 个答案: