Znacznik canvas w HTML-u

Stronę tą wyświetlono już: 180 razy

Znacznik <canvas> w HTML-u przeznaczony jest głównie pod tworzenie animacji z wykorzystaniem skryptów JavaScript na stronie. Oto przykład dodania takiego elementu na stronie:

Listing 1
  1. <canvas width="300" height="50" style="margin:auto; background: black; display:block"></canvas>

Wystarczy teraz dodać kod JavaScript, który coś wyświetli wewnątrz znacznika <canvas>:

Listing 2
  1. <canvas id="myCanvas" width="300" height="50" style="margin:auto; background: black; display:block"></canvas>
  2. <script type="text/javascript">
  3. function OnResize(){
  4. var c = document.getElementById("myCanvas");
  5. var draw = c.getContext("2d");
  6. c.width = window.innerWidth - 330;
  7. var grd = draw.createLinearGradient(0,0,c.width,0);
  8. grd.addColorStop(0,"red");
  9. grd.addColorStop(1,"white");
  10. grd.addColorStop(0, 'rgba(0,204,255,1.00)');
  11. grd.addColorStop(0.04, 'rgba(51,204,204,1.00)');
  12. grd.addColorStop(0.09, 'rgba(0,153,255,1.00)');
  13. grd.addColorStop(0.13, 'rgba(0,102,255,1.00)');
  14. grd.addColorStop(0.17, 'rgba(51,102,255,1.00)');
  15. grd.addColorStop(0.22, 'rgba(102,102,255,1.00)');
  16. grd.addColorStop(0.26, 'rgba(153,102,255,1.00)');
  17. grd.addColorStop(0.3, 'rgba(204,51,255,1.00)');
  18. grd.addColorStop(0.35, 'rgba(255,0,255,1.00)');
  19. grd.addColorStop(0.39, 'rgba(255,51,204,1.00)');
  20. grd.addColorStop(0.43, 'rgba(255,51,153,1.00)');
  21. grd.addColorStop(0.48, 'rgba(255,0,102,1.00)');
  22. grd.addColorStop(0.52, 'rgba(255,80,80,1.00)');
  23. grd.addColorStop(0.57, 'rgba(255,102,0,1.00)');
  24. grd.addColorStop(0.61, 'rgba(255,153,51,1.00)');
  25. grd.addColorStop(0.65, 'rgba(255,204,0,1.00)');
  26. grd.addColorStop(0.7, 'rgba(255,255,0,1.00)');
  27. grd.addColorStop(0.74, 'rgba(204,255,51,1.00)');
  28. grd.addColorStop(0.78, 'rgba(153,255,51,1.00)');
  29. grd.addColorStop(0.83, 'rgba(102,255,51,1.00)');
  30. grd.addColorStop(0.87, 'rgba(51,204,51,1.00)');
  31. grd.addColorStop(0.91, 'rgba(0,255,0,1.00)');
  32. grd.addColorStop(0.96, 'rgba(0,255,153,1.00)');
  33. grd.addColorStop(1, 'rgba(0,255,204,1.00)');
  34. draw.fillStyle = grd;
  35. draw.fillRect(0,0,c.width,c.height);
  36. }
  37. OnResize();
  38. window.onresize = OnResize;
  39. </script>

Wynik działania powyższego kodu:

Komentarze