2

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を教えてくれるはずなのに、この点についてはあまり説明的ではないようです。

4

2 に答える 2

5

これまでは、キャンバスの表面の特定の位置に円を描くことができるコードがありましたが、動いているように見せるためには、何度も何度も描き続ける必要があります。動きを滑らかにするために少し位置を変えて、1秒間に60回描くのが目安です（1秒間に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(); 
}

良い！このように、オブジェクトの値の 1 つを変更するたびに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});

OK、あとはオブジェクトの現在の位置にベクトルを追加し続けて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

于 2012-11-07T23:04:35.190 に答える
1

ほら、これをクラックしてください-

<!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>
于 2012-11-07T15:35:36.527 に答える