I want to draw a horizontal line when the game launches and was able to come up with something that drew the line using requestAnimationFrame()
and ctx.stroke()
.
The problem is that when I attempt to edit the length of the line by changing the values of the end point on the line, the line remains the same length.
If anyone could take a look at it and explain what is going on I would really appreciate it.
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>
There are many problems with your code.
You need to read up on using the canvas. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D will help.
requestAnimationFrame
once per frame. Putting it inside a while loop will just start 1000's of frames fighting for display refresh. ctx.beginPath();
ctx.clearRect(0,0,width,height)
requestAnimationFrame
is the time. eg drawTop(time)
See comments for more info.
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;
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.