Question

我试图从使用html5画布的点逐渐绘制3条相互120度的线。每条线的顶点将成为另外3个新的中心点，并在每个中心产生另外3条线，并重复此...

我的问题是，随着绘制更多项目，增量速度变得越来越慢（或绘图变慢）。（也许在我的代码中发生了一些事情，但我不太熟悉canvas是如何工作的......）。您可以复制代码并在本地浏览器中运行它以查看我的意思。

请查看我的代码（这很容易理解）并告诉我是什么原因造成的。

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

Answer 1

问题是你要附加并附加路径。这意味着每次调用stroke()时，新行与所有旧行一起被描边。由于旧线条在同一位置绘制在顶部，因此您不会清楚地看到这一点。随着越来越多的行被添加，它们需要更多的时间来抚摸它们。

要防止这种情况，您需要打破路径。使用beginPath()执行此操作。

如果您激活了评论后的行，它应该可以正常工作：

function line(pt1,pt2,color){
    ctx.beginPath(); //<-- activate this
    ctx.moveTo(pt1.x,pt1.y);
    ctx.lineTo(pt2.x,pt2.y);
    ctx.strokeStyle=color;
    ctx.lineWidth=2;
    ctx.stroke();
}

在循环中绘制更多东西时，在画布中绘图变得越来越慢

1 个答案: