Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>canvas 1</title>
- </head>
- <body>
- <canvas id="canv" width="700" height="500" ></canvas>
- <script>
- var context = document.getElementById("canv").getContext("2d");
- var startTime = (new Date()).getTime();
- requestAnimationFrame(render);
- var w = 700;
- var h = 500;
- var shiftX = 0;
- var moveL;
- function render()
- {
- var rectSide = 100;
- if (shiftX >= w-rectSide)
- {
- moveL = true;
- console.log(shiftX);
- }
- else if (shiftX <= 0)
- {
- moveL = false;
- console.log(shiftX);
- }
- shiftX += moveL ? -10 : 10;
- context.clearRect(0,0, w, h);
- context.fillStyle = "red";
- context.fillRect(shiftX, 10, rectSide, rectSide);
- requestAnimationFrame(render);
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement