Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

The HTML5 Canvas Element

75 vues

Publié le

The Canvas Element for members of the Erasmus+ founded project GAMES

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

The HTML5 Canvas Element

  1. 1. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The HTML5 Canvas Element Apostolos Syropoulos Xanthi, Greece asyropoulos@yahoo.com The Canvas Element for members of the Erasmus+ founded project GAMES
  2. 2. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Presentation Outline 1 What is the Canvas Element? 2 Simple Example 3 Playing with Videos 4 Finale
  3. 3. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss?
  4. 4. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss? The canvas element together with the audio and video elements are the things that make HTML5 shine!
  5. 5. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss? The canvas element together with the audio and video elements are the things that make HTML5 shine! Canvas has many applications: interactive movies, games, charts, diagrams, etc.
  6. 6. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss? The canvas element together with the audio and video elements are the things that make HTML5 shine! Canvas has many applications: interactive movies, games, charts, diagrams, etc. One can create whole sites with canvas but this is something most people do not recommend.
  7. 7. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss? The canvas element together with the audio and video elements are the things that make HTML5 shine! Canvas has many applications: interactive movies, games, charts, diagrams, etc. One can create whole sites with canvas but this is something most people do not recommend. There is no need to use Flash and Action Script anymore!
  8. 8. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss? The canvas element together with the audio and video elements are the things that make HTML5 shine! Canvas has many applications: interactive movies, games, charts, diagrams, etc. One can create whole sites with canvas but this is something most people do not recommend. There is no need to use Flash and Action Script anymore! Canvas is free as it is natively supported by all major browsers!
  9. 9. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss? The canvas element together with the audio and video elements are the things that make HTML5 shine! Canvas has many applications: interactive movies, games, charts, diagrams, etc. One can create whole sites with canvas but this is something most people do not recommend. There is no need to use Flash and Action Script anymore! Canvas is free as it is natively supported by all major browsers! Canvas is for 2D graphics for 3D graphics we need WebGL: http://arodic.github.io/p/jellyfish/
  10. 10. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Checking for support
  11. 11. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Checking for support <canvas> Your browser doesn't support "canvas". </canvas>
  12. 12. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Checking for support <canvas> Your browser doesn't support "canvas". </canvas> The problem with this approach is that one cannot do anything if the element is not supported!
  13. 13. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Checking for support <canvas> Your browser doesn't support "canvas". </canvas> The problem with this approach is that one cannot do anything if the element is not supported! However, we live in 2018 and all major browsers support this element!
  14. 14. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simplest Example
  15. 15. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simplest Example <!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>Canvas Example</title> </head> <body> <canvas id="canvas1" width="200" height="200"> Your browser doesn't support "canvas".</canvas> <script> var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); ctx.beginPath() ctx.moveTo(100,10); ctx.lineTo(150,140); ctx.lineTo(60,110); ctx.closePath(); ctx.fillStyle = 'lime'; ctx.strokeStyle = 'purple'; ctx.lineWidth = 4; ctx.fill(); ctx.stroke(); </script></body></html>
  16. 16. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Output of the Example
  17. 17. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Output of the Example
  18. 18. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <video> element revisited
  19. 19. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <video> element revisited One can embed videos in web pages as we already know.
  20. 20. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <video> element revisited One can embed videos in web pages as we already know. <video id="myVideo" width="720" height = "404"> <source src="sample-video.webm" type="video/webm"> <track src="sample-video.vtt" label="Greek subtitles" kind="subtitles" srclang="el" default></track> </video>
  21. 21. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <video> element revisited One can embed videos in web pages as we already know. <video id="myVideo" width="720" height = "404"> <source src="sample-video.webm" type="video/webm"> <track src="sample-video.vtt" label="Greek subtitles" kind="subtitles" srclang="el" default></track> </video> This contains subtitles! And to make it autostart:
  22. 22. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <video> element revisited One can embed videos in web pages as we already know. <video id="myVideo" width="720" height = "404"> <source src="sample-video.webm" type="video/webm"> <track src="sample-video.vtt" label="Greek subtitles" kind="subtitles" srclang="el" default></track> </video> This contains subtitles! And to make it autostart: <script> var video = document.getElementById("myVideo"); video.autoplay = true; video.load(); </script>
  23. 23. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A <video> over a <canvas>
  24. 24. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A <video> over a <canvas> When specifying a <video> element and a <canvas> element, then the video is reproduced on the canvas.
  25. 25. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A <video> over a <canvas> When specifying a <video> element and a <canvas> element, then the video is reproduced on the canvas. Let us see an example.
  26. 26. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple animation with JavaScript
  27. 27. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple animation with JavaScript A ball that follows the mouse.
  28. 28. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple animation with JavaScript A ball that follows the mouse. A bouncing ball.
  29. 29. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation Libraries
  30. 30. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation Libraries https://www.createjs.com/easeljs
  31. 31. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation Libraries https://www.createjs.com/easeljs http://phaser.io/
  32. 32. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale Thank you very much for your attention!

×