我一直在尝试让一些东西在 HTML 中工作，但我还没有完全确定下来。基本上，我想创建一个 Canvas ，然后在 Canvas 内制作一个从 Canvas 边缘移动到 Canvas 边缘的圆圈。有什么建议吗？
编辑:
到目前为止，人们想要我所拥有的，所以这里是:
<html>
<head>
<script type="text/javascript">
function draw () {
var canvas = document.getElementById('circle');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "rgb(150,29,28)";
var startPoint = (Math.PI/180)*0;
var endPoint = (Math.PI/180)*360;
context.beginPath();
context.arc(200,200,150,startPoint,endPoint,true);
context.fill();
context.closePath();
}
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas><br>
</body>
</html>
我不太确定如何在 Canvas 上画一个圆圈(而且我对圆圈的实现仍然犹豫不决)以及如何让它移动，你知道的。我有如何旋转某些东西的例子，但不是真正如何移动它。对不起那些没有经验的人，试图自己学习 HTML，但是我得到的书似乎并没有真正描述这方面的内容，尽管它应该是在教我 HTML。
最佳答案
到目前为止，您已经有了一个代码，您可以在其中在 Canvas 表面的某个位置绘制一个圆圈，很好，现在为了让它看起来像在移动，您必须继续绘制它一次又一次地稍微改变它的位置以赋予它平滑的运动效果，这是每秒绘制 60 次的标准(我认为这是因为每秒 60 帧是人眼可以注意到的最多，或其他)。当然，每次您在另一个位置绘制它时，都需要清除旧绘图。
让我们稍微更改您的代码以使其对动画友好:
<script type="text/javascript">
function init()
{
canvas = document.getElementById('canvas');
if(canvas.getContext)
context = canvas.getContext('2d');
else return;
setInterval(draw, 1000 / 60); // 60 times per second
}
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(150,29,28)";
// var startPoint = (Math.PI/180)*0; Kinda redundant, it's just 0
// var endPoint = (Math.PI/180)*360; Again, it's just PI times 2
context.beginPath();
context.arc(200, 200, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas><br>
现在有很多有趣的方法可以使物体向固定点移动，但最简单的当然是沿直线移动。为此，您需要
- 包含对象当前位置的向量
- 包含对象的目标位置的向量
让我们更改您的代码，以便我们掌握这些代码
var canvas, context,
position = {x: 200, y: 200},
target = {x: 400, y: 400};
function init()
{
...
}
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(150,29,28)";
context.beginPath();
context.arc(position.x, position.y, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
}
很好!这样，每当您更改 position 对象中的一个值时，您的圆圈的位置就会受到影响。
如果你从目标位置减去当前位置，你会得到另一个向量，它从当前位置直接指向目标位置，对吗？因此，获取该向量并对其进行归一化，将其长度变为 1，结果实际上是从目标到对象位置的 Angular (余弦，正弦)。这意味着如果将该归一化向量添加到对象的当前位置，对象将一次向目标位置移动 1 个单位。
规范化一个向量就是简单地将它的分量除以它的长度。
function normalize(v)
{
var length = Math.sqrt(v.x * v.x + v.y * v.y);
return {x: v.x / length, y: v.y / length};
}
var step = normalize({x: target.x - position.x, y: target.y - position.y});
好的，现在我们需要做的就是不断将step向量添加到对象的当前位置，直到它到达目标位置。
function normalize(v)
{
var length = Math.sqrt(v.x * v.x + v.y * v.y);
return {x: v.x / length, y: v.y / length};
}
var canvas, context,
position = {x: 200, y: 200},
target = {x: 400, y: 400},
step = normalize({x: target.x - position.x, y: target.y - position.y});
function init()
{
canvas = document.getElementById('canvas');
if(canvas.getContext)
context = canvas.getContext('2d');
else return;
setInterval(draw, 1000 / 60);
}
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(150,29,28)";
context.beginPath();
context.arc(position.x, position.y, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
position.x += step.x;
position.y += step.y;
}
就是这样。当然这是非常基本的代码，你必须添加一个条件来检查对象是否已经到达目标，否则它会一直越过目标。如果它移动得太慢，只需按任意速度因子缩放 step 矢量。同样在现实世界的应用程序中，你会有很多对象，而不仅仅是一个圆圈，所以你必须让它完全面向对象，因为每个对象都会有它的位置、目标位置、颜色等等。一个库使用向量会派上用场。这是我前一段时间为自己写的:http://pastebin.com/Hdxg8dxn
关于javascript - 制作一个移动的圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13271433/