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

Drawing in canvas becomes slower and slower when it draws more stuff during loop

本文关键字：绘制 布中 越来越 循环      更新时间：2023-09-26

我试图从一个点使用html5画布逐渐绘制3线，这是120度彼此。每条线的顶点将成为另外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>

问题是您一直在附加路径。这意味着每次调用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();
}
相关文章：