TAG
CSS
JavaScript
Result
Run
License
<p><button type="button" id="btn-start">Start</button></p> <canvas id="mycanvas" width="400" height="100"></canvas>
#mycanvas { border: 1px solid #CCC; } .mouseover { cursor: pointer; }
window.addEventListener("load", function() { const elBtnStart = document.getElementById("btn-start"); const elCanvas = document.getElementById("mycanvas"); let context = elCanvas.getContext("2d"); let x = 50; let newRect = new Path2D(); newRect.ellipse(x, 50, 20, 20, 0, 0.0, Math.PI * 2); context.fill(newRect); elBtnStart.addEventListener("click", draw); function draw() { x += 5; context.clearRect(0, 0, elCanvas.width, elCanvas.height); newRect = new Path2D(); newRect.ellipse(x, 50, 20, 20, 0, 0.0, Math.PI * 2); context.fill(newRect); if (x < elCanvas.width - 30) requestAnimationFrame(draw); else x = 50; } });
Console
expand_less
License
License
by DevDic
Close