Advertisement
Paarzivall

canvas

Jun 5th, 2018
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.18 KB | None | 0 0
  1.         <article class="row">
  2.             <canvas id="can" class="col-10 col-lg-4 mt-5 offset-1"  ></canvas>
  3.             <script>
  4.                 var canvas = document.getElementById("can");
  5.                 var wysokosc=-150;
  6.                 var speed=2.5;
  7.  
  8.                 function draw()
  9.                 {
  10.                     var ctx = canvas.getContext("2d");
  11.                     ctx.clearRect(0,0,400,150);
  12.  
  13.                     ctx.save();
  14.                     ctx.translate(0,wysokosc); 
  15.                    
  16.                     ctx.beginPath();  
  17.                         ctx.strokeStyle="rgba(255,0,0,0.4)";
  18.                         ctx.fillStyle="rgba(255,0,0,0.3)";
  19.                         ctx.moveTo(130,0);
  20.                         ctx.lineTo(130,70);
  21.                         ctx.lineTo(110,70);
  22.                         ctx.lineTo(140,150);
  23.                         ctx.lineTo(170,70);
  24.                         ctx.lineTo(150,70);
  25.                         ctx.lineTo(150,0);
  26.                         ctx.lineTo(130,0);
  27.                     ctx.fill();
  28.  
  29.                     ctx.restore();
  30.        
  31.                     wysokosc+=speed;
  32.        
  33.                     if(wysokosc>150)
  34.                     {
  35.                         wysokosc=-150;
  36.                     }
  37.  
  38.                     window.requestAnimationFrame(draw);
  39.                 }
  40.    
  41.                 $(document).ready(function() {
  42.                     window.requestAnimationFrame(draw);
  43.                 });
  44.             </script>
  45.     </article>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement