Question

一直想尝试用HTML工作，但我还没有完成它。基本上，我想创建一个画布，然后在画布内部创建一个圆圈，从画布的边缘移动到画布的边缘。有什么建议吗？

编辑：

人们想要我到目前为止所拥有的东西，所以这里是：

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

我不确定如何在画布上画一个圆圈（我对它的实现仍然很不满）以及如何制作它，你知道，移动。我有一些如何旋转东西的例子，但不是真的如何移动它。对于那些缺乏经验的人来说很抱歉，我试图自己学习HTML，但是我所得到的这本书在这方面似乎并不是真正的描述，即使它应该教我HTML。

Answer 1

所以到目前为止你有一个代码，你可以在某个位置画一个圆圈到画布表面，非常好，现在为了使它看起来像它在移动你必须继续绘制它一次又一次地将它的位置稍微改变以给它一个平滑的动作效果，它是每秒画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，结果实际上是从目标到对象位置的角度的（余弦，正弦）。这意味着如果将标准化向量添加到对象的当前位置，对象将一次向目标位置移动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

Answer 2

在这里，给你一个裂缝 -

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

var canvas, hdc;
var posx=50, posy=0, radius=50;

function circle(hdc, x, y, radius)
{
    hdc.beginPath();
    hdc.arc(x, y, radius, 0, 2*Math.PI);
    hdc.stroke();
//arc(x,y,r,start,stop)
}

function mInit()
{
    canvas = byId('tgtCanvas');
    hdc = canvas.getContext('2d');

    //circle(hdc, posx, posy, 50);
    setInterval(animateStep, 50);
}

var velX = 2;
function animateStep()
{
    posx += velX;
    if (posx+radius > canvas.width)
        velX *= -1;
    else if (posx-radius < 0)
        velX *= -1;

    hdc.clearRect(0,0,canvas.width,canvas.height);
    circle(hdc, posx, posy, radius);
}

</script>
<style>
</style>
</head>
<body>

    <canvas id='tgtCanvas' width='256' height='256'></canvas>

</body>
</html>

制作一个移动的圆圈

2 个答案: