Soy muy nuevo en la codificación y he estado tratando de descifrar animaciones con Javascript y HTML5. Tengo esta "barra de carga" como animación donde un rectángulo se expande hasta que llena el lienzo. La idea es que una vez tapada la lona se despeje la caja y se vuelva a empezar. En cambio, el rectángulo llena el lienzo y comienza a parpadear. ¿Algunas ideas?
window.onload = function() { var wipeWidth = 0 var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); console.log(context); function drawRect() { context.clearRect(0,0,300,150) context.fillStyle = "#305ef2"; context.rect(0, 0, wipeWidth, 150); context.fill() wipeWidth += 10 if(wipeWidth > 300) { wipeWidth = 0; } } setInterval(drawRect,50) }Olvidaste cerrar el camino. Puede usar fillRect en su lugar para evitar esto.
window.onload = function() { var wipeWidth = 0 var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); console.log(context); function drawRect() { context.clearRect(0, 0, 300, 150) context.fillStyle = "#305ef2"; // this context.beginPath() context.rect(0, 0, wipeWidth, 150); context.fill() context.closePath() // or just this // context.fillRect(0, 0, wipeWidth, 150); wipeWidth += 10 if (wipeWidth > 300) { wipeWidth = 0; } } setInterval(drawRect, 50) } <canvas id="canvas"></canvas>fillRect , requestAnimationFrame
var wipeWidth = 0 var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); var direction = +10; function drawRect() { context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "#305ef2"; context.fillRect(0, 0, wipeWidth, 150); wipeWidth += direction if (wipeWidth > canvas.width || wipeWidth < 0) { direction *= -1; } requestAnimationFrame(drawRect) } drawRect() canvas { background: gray; } <canvas id="canvas" width="600" height="50"></canvas>