如何讓JavaScript畫布繪製得更快？

我有以下代碼來顯示心電圖。我使用畫布繪製圖形背景（每個2.5毫米的網格）。後來我從數組中獲取y座標array_1（x座標是在程序中計算的）。這種方法的問題是，繪製整個圖形大約需要40秒，因爲在陣列array_1內有1250個值。我能做的是我可以在循環內繪製繪圖部分，在這種情況下，一旦頁面加載，整個圖形就會繪製出來。但是，我需要密謀在5秒內發生。不多。不低於。我將如何更改代碼來執行此操作？請幫忙。如何讓JavaScript畫布繪製得更快？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</head> 
<body> 
    <canvas id="canvas" width="1350" height="1300" style="background-color: white;"></canvas> 
    <script type='text/javascript'> 

    var canvas = document.getElementById("canvas"); 
    var ctxt = canvas.getContext("2d"); 
    var n1 = 1; 
    var n1_x=49; //Graph x coordinate starting pixel. 
    var n1_y=72;//Graph y coordinate starting pixel. 
    var array_1 = []// array from which y coordinates are taken. Has 1250 elements 
    var ctx = canvas.getContext("2d"); 
    var x=0; 
    var y=0; 
    var Line_position=-1; 
    while(x<=1350)//graph width 
    { 
     ctxt.lineWidth = "0.5"; 
     Line_position=Line_position+1; 
     if(Line_position%5==0) 
     { 
      ctxt.lineWidth = "1.5"; 
     } 

     ctxt.strokeStyle = "black"; 
     ctxt.beginPath(); 
     ctxt.moveTo(x, 0); 
     ctxt.lineTo(x, 1300); 
     ctxt.stroke(); 
     x=x+9.43; 

    } 

    Line_position=-1; 
    while(y<=1300)//graph height 
    { 
     ctxt.lineWidth = "0.5"; 
     Line_position=Line_position+1; 
     if(Line_position%5==0) 
     { 
      ctxt.lineWidth = "1.5"; 
     } 

     ctxt.strokeStyle = "black"; 
     ctxt.beginPath(); 
     ctxt.moveTo(0, y); 
     ctxt.lineTo(1350,y); 
     ctxt.stroke(); 
     y=y+9.43; 
    } 
    drawWave(); 
     function drawWave() 
     { 
      requestAnimationFrame(drawWave); 
       ctx.lineWidth = "1"; 
       ctx.strokeStyle = 'blue'; 
       ctx.beginPath(); 
       ctx.moveTo(n1_x- 1, n1_y+array_1[n1-1]);//move to the pixel position 
       ctx.lineTo(n1_x, n1_y+array_1[n1]);//Draw to the pixel position 
       ctx.stroke(); 
       n1_x=n1_x+0.374;//Incrementing pixel so as to traverse x axis. 
       n1++; 
} 

    </script> 
</body> 
</html>

這裏是數組： array_1 = [69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69， 69,69,69,69,69,69,69,69,69,69,69,69,69,20,20,20,20,20,20,20,20,20,20,20,20， 20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20， 20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20， 20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20， 20,20,20,20,20,20,20,20,20,20,20,20,20,69,69,69,69,69,69,69,69,69,69,69,69， 69,69,69,69,69,69,69,69,72,72,72,72,72,72,72,73,73,74,74,74,74,74,74,74,73， 73,73,73,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,74,74,74,73,73， 73,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,71,72,72,72,73， 73,73,72,72,72,73,73,73,74,73,73,72,72,72,72,72,73,73,73,73,73,72,72,7 2,72,73,73,73,72,72,72,71,101,71,70,70,70,69,68,68,67,67,66,66,67,67,69,70,72， 72,72,73,73,74,73,73,73,73,73,73,73,73,73,74,76,77,76,70,57,40,22,11,11,22， 40,57,69,73,73,71,71,71,72,72,73,73,74,74,74,73,72,72,72,72,72,72,72,72,72， 72,72,72,71,71,70,70,71,71,71,71,70,70,69,69,69,69,69,69,69,68,68,68,67,67， 66,66,65,65,64,63,63,62,62,62,62,62,62,62,62,63,63,64,65,66,67,68,68,69,70， 71,72,72,72,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73， 73,72,72,72,73,73,73,73,72,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72， 73,73,74,74,74,74,74,74,73,73,72,73,73,73,74,73,73,72,72,72,73,73,73,72,72， 73,73,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71， 70,70,70,70,70,69,69,68,67,67,67,67,68,69,71,72,72,73,73,73,73,74,74,74,74， 74,73,73,73,73,75,77,78,76,67,53,35,18,8,10,23,41,58,69,73,72,71,70,71,72， 73,73,73,73,73,73,73,73,72,72,73,73,73,73,72,71,71,70,70,71,71,71,71,71,71， 71,71,70,70,69,69,69,69,68,68,67,67,67,67,67,66,65,65,65,64,63,62,61,61,61， 60,60,60,59,60,60,60,61 ，62,63,65,66,66,67,68,69,70,71,72,72,72,72,73,73,73,72,72,72,72,72,72,72,73 ，73,73,73,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71,71,72 ，72,73,73,73,72,72,72,72,72,72,73,73,73,73,73,73,73,73,73,72,73,73,73,73,73 ，73,72,73,73,73,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73 ，73,73,73,73,73,73,73,72,71,71,70,70,69,69,69,68,67,67,66,65,66,66,68,69,70 ，71,72,72,73,73,73,73,73,73,74,74,74,74,74,74,76,78,78,74,64,48,29,13,5,10 ，26,45,62,71,73,72,71,71,72,73,73,73,73,73,74,74,74,73,72,72,72,73,73,73,73 ，73,73,73,72,72,72,72,71,71,71,71,71,71,71,71,71,70,70,69,69,69,69,68,67,66 ，66,66,66,65,65,64,63,62,62,61,61,60,60,60,60,61,62,62,63,64,65,66,67,68,70 ，71,72,72,72,72,72,72,73,73,73,73,73,73,73,74,74,75,75,74,74,74,73,73,73,74 ，73,73,73,73,73,74,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72 ，72,73,73,74,74,74,73,73,73,73,73,73,73,73,73,73,72,72,72,72,73,73,72,72,73 ，73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,72 ，72,71,70,70,70,69,69,68,6 8,67,67,66,67,67,68,69,70,71,72,73,73,74,74,73,73,73,74,75,75,74,73,73,74， 76,78,75,67,52,32,15,5,8,22,41,59,69,73,72,71,70,71,72,72,73,73,73,73,73， 73,73,73,73,72,72,72,72,72,72,72,72,72,72,71,71,71,70,70,70,70,70,70,70,69， 69,69,69,68,68,68,68,67,67,66,65,65,64,64,64,63,62,61,60,60,60,60,60,61,61， 62,62,63,64,65,65,66,67,68,69,70,71,71,71,71,71,71,72,72,73,73,73,72,72,73， 73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,71,71,71,71,71,71， 71,72,72,72,72,72,72,72,72,72,71,71,71,72,72,73,73,72,72,72,72,72,73,73,73， 73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,73,73,74,73,73,73,73,73,73,73， 73,73,73,73,73,72,72,72,72,71,71,71,70,70,70,70,69,69,68,67,67,68,69,71,72， 73,73,73,73,73,73,73,73,74,75,75,75,74,74,74,75,77,77,75,67,52,34,18,10,12， 26,45,62,71,74,73,72,72,72,73,74,74,74,75,75,74,74,74,74,74,74,74,74,74,73， 73,73,73,74,74,73,73,73,73,73,73,73,72,72,71,71,71,71,71,70,70,70,69,69,69， 68,68,68,68,67,66,65,64,63,63,62,62,62,63,63,63,63,64,65,66,67,69,69,70,71， 72,72,73,73,74,74,74,74,75,7 5,76,76,74,72,70,70,69,69];

來源

2015-12-05 TheEvilGuardian

你能澄清如下：'我需要繪製在5秒內發生。不多。不少。「這在語義上沒有意義。「範圍內」意味着任何時候直到目標都是可以接受的。你的意思是說「渲染應該不超過5秒鐘？」此外，您應該包含一個示例數據集。 – enhzflep

@enhzflep：對不起。我的意思是，圖的整個1250點的繪圖應該在5秒內發生。在我的系統中，需要40秒才能從array_1中獲取所有1250 y座標並繪製圖形。我的僱主要求我這樣做，ECG將在5秒內完成渲染。如何加快渲染速度，以便在頁面加載完成後精確繪製圖形需要5秒鐘？ – TheEvilGuardian

沒問題，我編輯了你的問題來反映我理解你想要的。只是爲了更清楚 - 我是否認爲你想要繪製動畫是否正確？也就是說，你希望整個數據集在5秒的時間內畫出來嗎？如果是這樣，請考慮您希望進行動畫的每秒幀數，然後將其乘以目標時間。假設5秒和30fps，你有150幀來覆蓋整個數據集。只需將數據集的大小除以該數字，即可獲得每幀需要繪製的點數。 1250/150 = 8.333 – enhzflep

我可能會這樣做的任務。正如評論中提到的，我們需要繪製一些數據點。我們繪製的數量取決於瀏覽器能夠提供動畫幀的速度。

我硬編碼值4，因爲這似乎是我的機器上工作，但沒有更多的工作，你也許可以使代碼時間本身和動態調整這個值，使您的動畫運行儘可能接近目標時間。我有一個快速的去，但結果很糟糕，我會留下來作爲研究或讀者的思想練習。通過跟蹤我們已經爲當前的「刷新週期」繪製了多少幀，我們知道在爲每個幀繪製的第一個點需要多少索引到數組中。

我試着儘可能地參數化代碼，但是很晚，我很累，我可能忽略了某處的某些東西。

<!doctype html> 
<html> 
<head> 
<script> 
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);} 

window.addEventListener('load', onDocLoaded, false); 
function onDocLoaded(evt) 
{ 
    drawBkg(byId('canvas'), 9.43, 5, "0.5", "1.5", "black"); 
    drawCurFrame(); 
} 

var dataSamples = [69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,72,72,72,72,72,72,72,73,73,74,74,74,74,74,74,74,73,73,73,73,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,74,74,74,73,73,73,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,71,72,72,72,73,73,73,72,72,72,73,73,73,74,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,72,73,73,73,72,72,72,71,101,71,70,70,70,69,68,68,67,67,66,66,67,67,69,70,72,72,72,73,73,74,73,73,73,73,73,73,73,73,73,74,76,77,76,70,57,40,22,11,11,22,40,57,69,73,73,71,71,71,72,72,73,73,74,74,74,73,72,72,72,72,72,72,72,72,72,72,72,72,71,71,70,70,71,71,71,71,70,70,69,69,69,69,69,69,69,68,68,68,67,67,66,66,65,65,64,63,63,62,62,62,62,62,62,62,62,63,63,64,65,66,67,68,68,69,70,71,72,72,72,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,73,73,73,73,72,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,73,73,74,74,74,74,74,74,73,73,72,73,73,73,74,73,73,72,72,72,73,73,73,72,72,73,73,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71,70,70,70,70,70,69,69,68,67,67,67,67,68,69,71,72,72,73,73,73,73,74,74,74,74,74,73,73,73,73,75,77,78,76,67,53,35,18,8,10,23,41,58,69,73,72,71,70,71,72,73,73,73,73,73,73,73,73,72,72,73,73,73,73,72,71,71,70,70,71,71,71,71,71,71,71,71,70,70,69,69,69,69,68,68,67,67,67,67,67,66,65,65,65,64,63,62,61,61,61,60,60,60,59,60,60,60,61,62,63,65,66,66,67,68,69,70,71,72,72,72,72,73,73,73,72,72,72,72,72,72,72,73,73,73,73,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71,71,72,72,73,73,73,72,72,72,72,72,72,73,73,73,73,73,73,73,73,73,72,73,73,73,73,73,73,72,73,73,73,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,71,71,70,70,69,69,69,68,67,67,66,65,66,66,68,69,70,71,72,72,73,73,73,73,73,73,74,74,74,74,74,74,76,78,78,74,64,48,29,13,5,10,26,45,62,71,73,72,71,71,72,73,73,73,73,73,74,74,74,73,72,72,72,73,73,73,73,73,73,73,72,72,72,72,71,71,71,71,71,71,71,71,71,70,70,69,69,69,69,68,67,66,66,66,66,65,65,64,63,62,62,61,61,60,60,60,60,61,62,62,63,64,65,66,67,68,70,71,72,72,72,72,72,72,73,73,73,73,73,73,73,74,74,75,75,74,74,74,73,73,73,74,73,73,73,73,73,74,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,74,74,74,73,73,73,73,73,73,73,73,73,73,72,72,72,72,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,72,72,71,70,70,70,69,69,68,68,67,67,66,67,67,68,69,70,71,72,73,73,74,74,73,73,73,74,75,75,74,73,73,74,76,78,75,67,52,32,15,5,8,22,41,59,69,73,72,71,70,71,72,72,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,72,72,72,71,71,71,70,70,70,70,70,70,70,69,69,69,69,68,68,68,68,67,67,66,65,65,64,64,64,63,62,61,60,60,60,60,60,61,61,62,62,63,64,65,65,66,67,68,69,70,71,71,71,71,71,71,72,72,73,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,71,71,71,71,71,71,71,72,72,72,72,72,72,72,72,72,71,71,71,72,72,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,73,73,74,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,71,71,71,70,70,70,70,69,69,68,67,67,68,69,71,72,73,73,73,73,73,73,73,73,74,75,75,75,74,74,74,75,77,77,75,67,52,34,18,10,12,26,45,62,71,74,73,72,72,72,73,74,74,74,75,75,74,74,74,74,74,74,74,74,74,73,73,73,73,74,74,73,73,73,73,73,73,73,72,72,71,71,71,71,71,70,70,70,69,69,69,68,68,68,68,67,66,65,64,63,63,62,62,62,63,63,63,63,64,65,66,67,69,69,70,71,72,72,73,73,74,74,74,74,75,75,76,76,74,72,70,70,69,69 ]; 

function drawBkg(canvasElem, squareSize, numSquaresPerBlock, minorLineWidthStr, majorLineWidthStr, lineColStr) 
{ 
    var nLinesDone = 0; 
    var i, curX, curY; 
    var ctx = canvasElem.getContext('2d'); 
    ctx.clearRect(0,0,canvasElem.width,canvasElem.height); 

    // draw the vertical lines 
    curX=0; 
    ctx.strokeStyle = lineColStr; 
    while (curX < canvasElem.width) 
    { 
     if (nLinesDone % numSquaresPerBlock == 0) 
      ctx.lineWidth = majorLineWidthStr; 
     else 
      ctx.lineWidth = minorLineWidthStr; 

     ctx.beginPath(); 
     ctx.moveTo(curX, 0); 
     ctx.lineTo(curX, canvasElem.height); 
     ctx.stroke(); 

     curX += squareSize; 
     nLinesDone++; 
    } 

    // draw the horizontal lines 
    curY=0; 
    nLinesDone = 0; 
    while (curY < canvasElem.height) 
    { 
     if (nLinesDone % numSquaresPerBlock == 0) 
      ctx.lineWidth = majorLineWidthStr; 
     else 
      ctx.lineWidth = minorLineWidthStr; 

     ctx.beginPath(); 
     ctx.moveTo(0, curY); 
     ctx.lineTo(canvasElem.width, curY); 
     ctx.stroke(); 

     curY += squareSize; 
     nLinesDone++; 
    } 
} 

// position that will be treated as 0,0 when drawing our points. 
var originX=49; 
var originY=72; 

function drawSamples(nSamplesToDraw, firstSample, lineWidthStr, lineColourStr) 
{ 
    var can = byId('canvas'); 
    var ctx = can.getContext('2d'); 

    ctx.strokeStyle = lineColourStr; 
    ctx.lineWidth = lineWidthStr; 
    console.log(firstSample); 
    ctx.beginPath(); 

    ctx.moveTo(originX+firstSample-1, dataSamples[firstSample-1]+originY); 
    for (var i=0; i<nSamplesToDraw; i++) 
    { 
     var curSample = dataSamples[i + firstSample]; 
     ctx.lineTo(originX+firstSample+i, curSample+originY); 
    } 
    ctx.stroke(); 
} 

var curFrame=0; 
var nPointsPerFrame = 4; 
function drawCurFrame() 
{ 
    if ((dataSamples.length - (nPointsPerFrame * curFrame)) < nPointsPerFrame)  // will we over-run the end of the array of datapoints? 
    { 
     curFrame = 0;                // if so, reset 
     drawBkg(byId('canvas'), 9.43, 5, "0.5", "1.5", "black"); 
    } 
    drawSamples(nPointsPerFrame, nPointsPerFrame*curFrame, "1", "blue"); 
    curFrame++; 
    requestAnimationFrame(drawCurFrame); 
} 
</script> 

<style> 
#canvas 
{ 
    border: solid 1px black; 
    background-color: #FFFFFF; 
} 
</style> 

</head> 
<body> 
    <div id='txt'></div> 
    <canvas id="canvas" width="1350" height="1300"></canvas> 

</body> 
</html>

來源

2015-12-05 14:05:48 enhzflep

哇，這個作品！：D非常感謝朋友:) – TheEvilGuardian

更新

現在，我看到您提供一些更多的信息，我得到你想要的。

問題是你需要在時間t內繪製固定數量的線段。

由於您不知道每幀可能需要多長時間，因此您無法依賴固定幀速率。替代它只是使用當前時間並節省結束時間。

獲取開始時間，然後每幀畫出所有應繪製到當前時間。由於正在繪製的線段將不會顯示，直到下一個屏幕刷新時，您將獲得約16毫秒的時間，因此需要對此進行調整。

我所做的是跟蹤平均幀時間，並用一半的時間來估計何時顯示新的畫布更新。

它有點迂迴，但不妨展示如何獲得所需的時間儘可能接近。如果你不關心它的幾個ms，那麼只需刪除平均幀時間的東西。在一臺慢速機器上，您最多可以休息30ms。

var canvas; // canvas 
var ctx; 

function getCanvas() { 
    // to do 
    // get canvas and context 
} 
function drawGrid() { 
    // to do 
    // draw the grid 
} 
function drawTimedLine(){ 
    if(canvas === undefined){ // if the canvas not available get it 
     getCanvas(); 
    } 
    // clear the canvas is repeating animation 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawGrid(); 

    var array_1 = ; // your data 


    // All stuff needed for timed animation. 
    // The frame you render will not be displayed untill the next 
    // vertical refresh which is unknown, Assume it is one frame. 
    var startDelay = 1000;  // if Needed time in milliseconds to delay start 
    var endTime;    // hold the time that the animation has to end 
    var lastDataPoint;   // holds the last point drawn to 
    var timeToDraw = 5 * 1000; // how long the animation should last 
    var repeatAfter = 1 *1000; // if you want to repeat the animatoin 
    var frameCount = 0;   // count the frames to get average frame time 
    var startTime;    //the start time; 
    var numberPoints = array_1.length; // number of points; 
    var startX = 49;   // line starts at 
    var yOffset = 72;   // line Y offset 
    var endX = 512;    // line ends at. 
    var width = endX - startX; // width 
    var xStep = width/numberPoints; // X step per point 
    var pointsPerMS = numberPoints/timeToDraw; // get how many points per ms should be drawn 

    // function to draw 
    function drawWave() { 
     // variable needed 
     var averageframeTime, timeLeft, i, currentTime; 
     currentTime = new Date().valueOf();  // gets the time in millisecond; 
     if (startTime === undefined) {   // Is this the first frame  
      startTime = currentTime;   // save the start time; 
      endTime = currentTime + timeToDraw; // workout when the end time is; 
      lastDataPoint = 0;     // set the data position to the start; 
      averageframeTime = 0;    // no frames counted so frame time is zero   
     } else { 
      frameCount += 1;     // count the frames 
      // get the average frame time 
      averageframeTime = (currentTime - startTime)/frameCount; 
     } 
     // get the time this frame 
     // will most likely be displayed 
     // then calculate how long 
     // till the end 
     timeLeft = endTime - Math.min(endTime, currentTime + averageframeTime/2); 

     // now get where we should 
     // be when the frame is presented 
     pointPos = Math.floor(pointsPerMS * (timeToDraw - timeLeft)); 


     // now draw the points from where we last left of 
     // till the new pos; 
     ctx.lineWidth = 4; 
     ctx.strokeStyle = 'blue'; 

     ctx.beginPath(); 
     ctx.moveTo( // move to first point 
      lastDataPoint * xStep + startX, 
      array_1[lastDataPoint] + yOffset 
     ); 
     // draw each line from the last drawn to the new position 
     for (i = lastDataPoint + 1; i <= pointPos && i < numberPoints; i++) { 
      // Add the line segment 
      ctx.lineTo(
       i * xStep + startX, 
       array_1[i] + yOffset 
      ); 
     } 
     ctx.stroke();     // execute the render commands 
     lastDataPoint = pointPos;  // update the last point 
     if (pointPos < numberPoints) { // are we there yet??? 
      requestAnimationFrame(drawWave); // no so request another frame 
     }else{ 
      // if you want to repeat the animation 
      setTimeout(drawTimedLine , repeatAfter); 
     } 
    } 
    // start the line animation with delay if needed 
    setTimeout(drawWave,startDelay); 
}  

// use this if you want it to start as soon as page is ready.  
document.addEventListener("DOMContentLoaded",drawTimedLine); 
// or use if you want it to start when page has images loaded and is ready 
// document.addEventListener("load",drawTimedLine);

我還添加了重複動畫的功能。如果不需要只是刪除代碼

我原來的答覆

不知道是什麼問題，有速度，因爲它運行得很好我的機器上。

要建立一個更好的開始使用

function startFunction(){ 
    // your code 
} 
document.addEventListener("DOMContentLoaded",startFunction);

這將等到頁面加載和解析的頁面。圖像和其他媒體可能尚未加載，但頁面已準備好進行操作。

不確定你的意思是5秒。假設你可能想要在5秒內開始放屁。

以下將做到這一點。

document.addEventListener("DOMContentLoaded",function() {setTimeout(startFunction,5000);});

我會問爲什麼用1250繪製在時間圖中的一個條目是沒有那麼多的線條吸引。如果您添加ctx.beginPath()ctx.moveTo(/*first point*/)然後使用ctx.moveTo(/*points*/)循環所有點，那麼ctx.stroke()將實時運行，但最慢的設備。

BTW ctx.lineWidth是一個Number不是一個字符串。你還有兩種情況？爲畫布使用一個上下文。刪除ctxt並只使用ctx，最後您不需要將type='text/javascript'添加到腳本標記中，因爲Javascript是默認設置。

來源

2015-12-05 08:31:37 Blindman67

的'load'事件** **不等到圖像加載，'DOMContentLoaded'沒有。 –

@Leon對不起我的壞 – Blindman67

1）不需要花費那麼長的時間來繪製1000行，即使100000行在任何像樣的瀏覽器上都不會超過10毫秒。看看時間在哪裏丟失。
2）你的代碼的核心問題是它缺乏模塊性。將您的代碼分成幾個清晰的功能，只將這些參數分組爲幾個對象，正確命名和縮進。

下面這如何可能看起來的（不完整的，但工作）的例子。

var cv, ctx; 
 
var data = null; 
 
var debug = true; 
 

 
// --------------------------------------- 
 

 
// define here all graphic related parameters 
 
var gfxParams = { 
 
    canvasWidth: 600, 
 
    canvasHeight: 600, 
 
    gridColor: '#A66', 
 
    gridSpacing: 10, 
 
    gridLineWidth: 0.5, 
 
    gridStrongLinesEvery: 5, 
 
    lineColor: '#AEB', 
 
    lastLineColor: '#8A9' // , ... 
 
}; 
 

 
// define here all animation related parameters 
 
var animationParams = { 
 
    duration: 5, 
 
    startTime: -1 
 
} 
 

 

 
// --------------------------------------- 
 
//    main 
 
// --------------------------------------- 
 

 
window.onload = function() { 
 
    data = getData(); 
 
    setupCanvas(data); 
 
    launchAnimation(); 
 
} 
 

 
// --------------------------------------- 
 

 
// 
 
function setupCanvas(data) { 
 
    cv = document.getElementById('cv'); 
 
    cv.width = gfxParams.canvasWidth; 
 
    cv.height = gfxParams.canvasHeight; 
 
    ctx = cv.getContext('2d'); 
 
    // here you should translate and scale the context 
 
    // so that it shows your data. 
 
} 
 

 
function drawGrid(ctx) { 
 
    var i = 0, 
 
    pos = 0, 
 
    lw = gfxParams.gridLineWidth; 
 
    ctx.fillStyle = gfxParams.gridColor; 
 
    var vLineCount = gfxParams.canvasWidth/gfxParams.gridSpacing; 
 
    for (i = 0; i < vLineCount; i++) { 
 
    pos = i * gfxParams.gridSpacing; 
 
    ctx.fillRect(pos, 0, lw, gfxParams.canvasHeight); 
 
    } 
 
    var hLineCount = gfxParams.canvasHeight/gfxParams.gridSpacing; 
 
    for (i = 0; i < hLineCount; i++) { 
 
    pos = i * gfxParams.gridSpacing; 
 
    ctx.fillRect(0, pos, gfxParams.canvasWidth, lw); 
 
    } 
 
} 
 

 
function animate() { 
 
    requestAnimationFrame(animate); 
 
    var now = Date.now(); 
 
    // erase screen 
 
    ctx.clearRect(0, 0, gfxParams.canvasWidth, gfxParams.canvasHeight); 
 
    // draw grid 
 
    drawGrid(ctx); 
 
    // draw lines 
 
    var lastIndex = getLastDrawnIndex(data, now - animationParams.startTime); 
 
    drawLines(ctx, data, lastIndex); 
 
    if (debug) { 
 
    ctx.save(); 
 
    ctx.fillStyle = '#000'; 
 
    ctx.fillText(lastIndex + ' lines drawn. Time elapsed : ' + (now - animationParams.startTime), 10, 10); 
 
    ctx.restore(); 
 
    } 
 
} 
 

 
// comment 
 
function launchAnimation() { 
 
    requestAnimationFrame(animate); 
 
    animationParams.startTime = Date.now(); 
 
} 
 

 
// comment 
 
function getData() { 
 
    var newData = []; 
 
    for (var i = 0; i < 500; i++) { 
 
    newData.push([Math.random() * 600, Math.random() * 600]); 
 
    } 
 
    return newData; 
 
} 
 

 
// comment 
 
function getLastDrawnIndex(data, timeElapsed_ms) { 
 
    var timeElapsed = timeElapsed_ms/1000; 
 
    if (timeElapsed >= animationParams.duration) return data.length - 1; 
 
    return Math.floor(data.length * timeElapsed/animationParams.duration); 
 
} 
 

 
function drawLines(ctx, data, lastIndex) { 
 
    ctx.strokeStyle = gfxParams.lineColor; 
 
    // other ctx setup here. 
 
    for (var i = 0; i < lastIndex - 1; i++) { 
 
    drawLine(ctx, data[i], data[i + 1]); 
 
    } 
 
    ctx.strokeStyle = gfxParams.lastLineColor; 
 
    drawLine(ctx, data[lastIndex - 1], data[lastIndex]); 
 
} 
 

 
function drawLine(ctx, p1, p2) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(p1[0], p1[1]); 
 
    ctx.lineTo(p2[0], p2[1]); 
 
    ctx.stroke(); 
 
}

<canvas id='cv'></canvas>

來源

2015-12-05 17:22:48 GameAlchemist

如何讓JavaScript畫布繪製得更快？

回答

相關問題