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/en-US/docs/Web/API/CanvasRenderingContext2D会有所帮助。

每帧只调用一次requestAnimationFrame。将其放入while循环中只会开始争夺显示刷新的1000帧。
以ctx.beginPath();开头的路径
使用ctx.clearRect(0,0,width,height)
通过属性而不是通过样式属性设置画布大小。
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;
    }
  }
}

使用RequestAnimationFrame（）绘制线条

1 个答案: