0

HTML5キャンバスを使用してJavascriptでアニメーションを作成するには、最初に六角形の周りのポイントごとのパスを記述できる必要があります。私はすでに各頂点のx/y座標を持っています。エッジの周りをどちらの方向に移動するかわからないので、どのソリューションでもどちらの方向にも機能するはずです。

六角形の半径、つまり各辺は20ピクセルです。そのパスの各ピクセルのx位置とy位置をマップする、各辺に20ポイントのセットを作成する必要があります。これは、各ピクセルが各ステップで1ずつ増加し、他の軸が静的なままである直線の場合、明らかに簡単です。角度の付いた側面では、ポイントをプロットするために必要な三角法を取得できません。

私はこれが些細なことであるとかなり確信していますが、私の心の中で明確になるためにいくつかの助けをいただければ幸いです。

4

2 に答える 2

0

このコードは、点x1/y1から点x2/y2まで等距離のドットを描画します。

逆方向にも機能します（x2/y2からx1/y1）。

各頂点のすべてのx/yがあるので、準備ができているはずです。

コードとフィドルは次のとおりです。http：//jsfiddle.net/m1erickson/pW4De/

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <style>
        body{ background-color: ivory; }
        canvas{border:1px solid red;}
        p{font-size:24px;}
    </style>

    <script>
        $(function(){

            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");

            DrawDottedLine(300,400,7,7,7,20,"green");

            function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
              var dx=x2-x1;
              var dy=y2-y1;
              var spaceX=dx/(dotCount-1);
              var spaceY=dy/(dotCount-1);
              var newX=x1;
              var newY=y1;
              for (var i=0;i<dotCount;i++){
                      drawDot(newX,newY,dotRadius,dotColor);
                      newX+=spaceX;
                      newY+=spaceY;              
               }
               drawDot(x1,y1,3,"red");
               drawDot(x2,y2,3,"red");
            }
            function drawDot(x,y,dotRadius,dotColor){
                ctx.beginPath();
                ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
                ctx.fillStyle = dotColor;
                ctx.fill();              
            }           

        }); // end $(function(){});
    </script>

    </head>

    <body>

    <canvas id="canvas" width=307 height=407></canvas>

    </body>
    </html>
于 2013-02-21T21:52:23.407 に答える
0

ブレゼンハムの線アルゴリズムを検討するかもしれません。これは標準のgotoであり、実装が簡単です。... http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm

function plotLine(p1, p2){
    var dx = p2.x - p1.x;
    var dy = p2.y - p2.y;
    var err = 0.0;
    var derr = Math.abs( dy / dx ); 

    var y = p1.y;
    for(var x = p1.x; x < p2.x; x++){
        drawPoint(new Point(x,y));
        err = err + derr;
        if(err >= 0.5 ) {
           y++;
           err = err - 1.0;
        }
    }
}

アンチエイリアス処理されないため、これは悪いアプローチかもしれませんが。エイリアシング（Google it ...）を実装する線画アルゴリズムは、線画APIに組み込まれているキャンバスを使用し、長くなる連続する線をオーバーレイすることです。

于 2013-02-21T15:40:22.947 に答える