Facebook
From Burly Giraffe, 5 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 317
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.     <head>
  4.         <meta charset="utf-8">
  5.             <title>Animacja w Canvas</title>
  6.             <script type="text/javascript">
  7.                 var canvas
  8.                 var context;
  9.                 var x = 20;
  10.                 var y = 200;
  11.                                 var z = 200;
  12.                                 var a = 20;
  13.                 var dx = 10; /// o ile ma sie przesuwać
  14.                 var kolory = new Array("blue", "red", "yellow", "green"); /// zmina kolorow
  15.                 var i = 0;
  16.                
  17.  // rysownie koła onLoad body
  18.                 function draw() {
  19.                     canvas = document.getElementById('image1');
  20.                     context = canvas.getContext('2d');
  21.                     setInterval(anim, 20); // co ile wywyołuje funkcje animacja im mniejsza wartośc tym szybciej
  22.                 }
  23.            
  24.             function anim() {
  25.                 context.clearRect(0, 0, canvas.width, canvas.height);
  26.                 x += dx;
  27.                 if (x > (canvas.width - 20)) {
  28.                     dx = -10;
  29.                     i = ++i % kolory.length;
  30.                 }
  31.                 if (x < 20) {
  32.                     dx = 10;
  33.                     i = ++i % kolory.length;
  34.                 }
  35. // rysowanie koła
  36.                 context.beginPath();
  37.                 context.fillStyle = kolory[i];
  38.                 context.arc(x, y, 20, 0, Math.PI * 2, true);
  39.                 context.closePath;
  40.                 context.fill();
  41. /// koniec rysowania koła
  42.             }
  43.             </script>
  44.            
  45.             <style type="text/css">
  46.                 canvas { border: 1px solid blue; }
  47.             </style>
  48.            
  49.             </head>
  50.    
  51.     <body onload="draw();">
  52.         <canvas id="image1" width="400" height="400">
  53.             Twoja przeglądarka nie wspiera elementu canvas!
  54.             Pobierz Internet Explorer 9 lub nowszą wersję!
  55.         </canvas>
  56.     </body>
  57.    
  58. </html>