使用RequestAnimationFrame（）繪制線條

Question

我想在游戲啟動時繪制一條水平線，並能夠使用requestAnimationFrame()和ctx.stroke()提出一些畫線的方法。

問題是，當我嘗試通過更改直線端點的值來編輯直線的長度時，直線保持相同的長度。

如果有人可以看一下並解釋發生了什么，我將非常感謝。

 var canvasTop = document.getElementById('top'); var ctxTop = canvasTop.getContext('2d'); var frameCountTop = 0; var fpsTop, fpsIntervalTop, startTimeTop, nowTop, thenTop, elapsedTop; function startAnimatingTop(fpsTop) { fpsIntervalTop = 1000 / fpsTop; thenTop = Date.now(); startTimeTop = thenTop; drawTop(); } var topLinePointA = [32, 80]; var topLinePointB = [280, 80]; var topLineStart = topLinePointA[0]; var topLineIncrement = topLineStart + 1; var topLineEnd = topLinePointB[0]; function drawTop() { var i = 32; while (i < topLineEnd) { requestAnimationFrame(drawTop); i++; nowTop = Date.now(); elapsedTop = nowTop - thenTop; if (elapsedTop > fpsIntervalTop && i < topLineEnd) { thenTop = nowTop - (elapsedTop % fpsIntervalTop); ctxTop.lineWidth = 20; ctxTop.strokeStyle = "black"; ctxTop.moveTo(topLineStart, 80); ctxTop.lineTo(topLineIncrement, 80); ctxTop.stroke(); topLineStart += 1; } else { cancelAnimationFrame(drawTop); return; } } } startAnimatingTop(100); 

 /*HANGMAN STYLES*/ /*CLASS SELECTORS*/ .lineContainer { /*border-style: solid; border-color: blue;*/ } #top { position: absolute; height: 5%; width: 45%; left: 30%; } #side { position: absolute; bottom: 20%; left: 70%; height: 78%; width: 5%; } #bottom { position: absolute; bottom: 35%; height: 5%; width: 56%; left: 20%; } #hangman { position: absolute; left: 30%; height: 40%; width: 10%; } 

 <canvas id='top' class='lineContainer'></canvas> <canvas id='side' class='lineContainer'></canvas> <canvas id='bottom' class='lineContainer'></canvas> <canvas id='hangman' class='lineContainer'></canvas> <canvas id='puzzle'></canvas> <div id='scorecard'> </div> 

Answer 1

您的代碼有很多問題。

您需要閱讀有關使用畫布的內容。 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D將有所幫助。

1. 每幀僅調用一次requestAnimationFrame 。 將其放入while循環中只會開始爭奪顯示刷新的1000幀。
2. 使用ctx.beginPath();開始路徑ctx.beginPath();
3. 使用ctx.clearRect(0,0,width,height)清除畫布
4. 通過屬性而非樣式屬性設置畫布大小。
5. requestAnimationFrame調用的函數的第一個參數是時間。 例如drawTop(time)

查看評論以獲取更多信息。

ctx.canvas.width = 100;  // << set the canvas size via canvas attributes not style
ctx.canvas.height = 100;

var thenTop = performance.now(); // to get time.

requestAnimationFrame(drawTop); // <<< start the render loop with request, dont call direct

function drawTop(nowTop) { // << time passed to render call
  requestAnimationFrame(drawTop);  //                                 <<< put call here not in loop
  ctxTop.clearRect(0, 0, ctxTop.canvas.width, ctxTop.canvas.height);  // <<<  clear the canvas
  var i = 32;
  while (i < topLineEnd) {
    // requestAnimationFrame(drawTop); //      <<<<<<< Not here
    i++;

    elapsedTop = nowTop - thenTop;
    if (elapsedTop > fpsIntervalTop && i < topLineEnd) {
        thenTop = nowTop - (elapsedTop % fpsIntervalTop);
        ctxTop.lineWidth = 20;
        ctxTop.strokeStyle = "black";
        ctxTop.beginPath();  //            <<<<<< To start a new path
        ctxTop.moveTo(topLineStart, 80);
        ctxTop.lineTo(topLineIncrement, 80);
        ctxTop.stroke();
        topLineStart += 1;
    } else {
      return;
    }
  }
}