0

html5 キャンバスを使用して、点から互いに 120 度の 3 本の線を段階的に描画しようとしています。各線の頂点が別の 3 つの新しい中心点になり、各中心で別の 3 つの線が生成され、これが繰り返されます。

私の問題は、より多くのアイテムが描画されるにつれて、増分速度がますます遅くなる（または描画が遅くなる）ことです。（私のコードで何かが起こるかもしれませんが、キャンバスが正確にどのように機能するかはよくわかりません...）。コードをコピーして、ローカル ブラウザーで実行すると、このコードの意味を確認できます。

私のコードを見て (非常に理解しやすい)、何が原因なのか教えてください。

<!DOCTYPE HTML>
<html>
<head>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
</head>
<body>
<canvas id="canvas" ></canvas>

<script>

    window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame ||  window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width= window.innerWidth;
    canvas.height= window.innerHeight;

    // some staring test values
    var centerPt={x:canvas.width/2,y:canvas.height/2};
    var radius=100;
    var angle=0;

    // calculate the 3 endpoints at 120 degree separations
    var endPt000=anglePoint(centerPt,90);
    var endPt120=anglePoint(centerPt,210);
    var endPt240=anglePoint(centerPt,330);

    var length = 0;
    var maxLength = 100;
    var centreSet = new Array();
        centreSet = getCentres();
    var counter = 0;
    var end = centreSet.length;
    init();

    function init() {
        start(centreSet[0].x, centreSet[0].y);
    }

    function start(myX, myY) {
        centerPt.x = myX;
        centerPt.y = myY;
        animate(centerPt, length);
    }

  function animate(centerPt,length) {
    // update
    // clear
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // draw stuff
    draw(centerPt,length);
    length = length + 1;
    // request new frame
    if(length < maxLength){
        requestAnimFrame(function() {
          animate(centerPt,length);
        });
    }
    else{
        if(counter < end){
            counter = counter + 1;
            centerPt.x = centreSet[counter].x;
            centerPt.y = centreSet[counter].y;
            endPt000=anglePoint(centerPt,90);
            endPt120=anglePoint(centerPt,210);
            endPt240=anglePoint(centerPt,330);
            length = 0;
            setTimeout(function(){animate(centerPt, length);},600);
        }
    }
  }

// draw a red center dot
// draw 3 blue endpoint dots
// draw 3 lines from center going slider% of the way to the endpoints 
function draw(centerPt,sliderValue){

    var pct=sliderValue;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    line(centerPt,pointAtPercent(centerPt,endPt000,pct),"green");
    line(centerPt,pointAtPercent(centerPt,endPt120,pct),"green");
    line(centerPt,pointAtPercent(centerPt,endPt240,pct),"green");

}

// calc XY at the specified angle off the centerpoint 
function anglePoint(centerPt,degrees){
    var x=centerPt.x-radius*Math.cos( degrees*Math.PI/180 );
    var y=centerPt.y-radius*Math.sin( degrees*Math.PI/180 );
    return({x:x,y:y});
}

// just draw a line from point1 to point2
function line(pt1,pt2,color){
   // ctx.beginPath();
    ctx.moveTo(pt1.x,pt1.y);
    ctx.lineTo(pt2.x,pt2.y);
    ctx.strokeStyle=color;
    ctx.lineWidth=2;
    ctx.stroke();
}

// calc XY which is a specified percent distance from pt1 to pt2
function pointAtPercent(pt1,pt2,sliderValue) {
    // calculate XY at slider% towards pt2
    var x = pt1.x + (pt2.x-pt1.x) * sliderValue/100;
    var y = pt1.y + (pt2.y-pt1.y) * sliderValue/100;
    return({x:x,y:y});
}

//the following are used to get all the center points...
function getCentres() {
    var x = window.innerWidth/2;
    var y = window.innerHeight/2;
    centreSet[0] = centerPt;
    var ref = 0;
    var end = 0;
    var b = true;
    var tempCenter = centerPt;
    for(var j = 0; j < 5; j++){
        tempCenter = centreSet[ref];
        end = end + 1;
        centreSet[end] = anglePoint(tempCenter,90);
        end = end + 1;
        centreSet[end] = anglePoint(tempCenter,210);
        end = end + 1;
        centreSet[end] = anglePoint(tempCenter,330);

        ref = ref+1;

    }
    return centreSet;
}
   </script>
   </body>
</html>
4

1 に答える 1