Javascript #10 : canvas

451 views

Published on

Javascript #10 : canvas

Published in: Software
  • Be the first to comment

  • Be the first to like this

Javascript #10 : canvas

  1. 1. Javascript & Canvas
  2. 2. 1. HTML
  3. 3. The canvas element provides scripts with a resolution- dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. Canvas (1) http://www.w3.org
  4. 4. The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). Canvas (2) w3schools.com
  5. 5. Which browsers does Canvas support? Source : http://caniuse.com
  6. 6. Use canvas <canvas id="game" width="600" height="350"></canvas>
  7. 7. 2. Javascript
  8. 8. The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a <canvas> element. Canvas context (1) developer.mozilla.org
  9. 9. Canvas context (2) var canvas = document.getElementById('game'); console.log(canvas); // <canvas id="game" width="800" height="350"></canvas> var context = canvas.getContext("2d"); console.log(context); // CanvasRenderingContext2D
  10. 10. Canvas Coordinates X Y [0, 0] [300, 175] [600, 350]
  11. 11. Styles Fill Stroke
  12. 12. 2.1 Drawing
  13. 13. Drawing rectangles var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); context.fillRect(0, 0, 100, 100); context.strokeRect(0, 0, 100, 100); // Parameters : x, y, width, height
  14. 14. Drawing lines var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(0, 300); context.lineTo(200, 20); context.stroke(); context.closePath();
  15. 15. Drawing text var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); context.fillText("Hello world", 50, 100); context.strokeText("Hello world", 50, 150);
  16. 16. Drawing images var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); var logo = new Image(); logo.src = "images/player.png"; context.drawImage(logo, 100, 100);
  17. 17. Erasing var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); context.clearRect(10, 10, 100, 100);
  18. 18. 2.2 Style
  19. 19. Colors (1) var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(0, 0, 100, 100); context.fillStyle = "red"; context.fillRect(100, 100, 100, 100);
  20. 20. Colors (2) var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); context.strokeStyle = "blue"; context.strokeRect(0, 0, 100, 100); context.strokeStyle = "red"; context.strokeRect(100, 100, 100, 100);
  21. 21. Text var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); context.font = "30px Comic Sans Ms"; context.fillStyle = "green"; context.fillText("Hello!", 0, 30);
  22. 22. 3 Animate
  23. 23. setInterval() function sayHello(){ alert('Hello!'); } setInterval(sayHello, 2000); setInterval(function(){ alert('Hello!'); }, 2000);
  24. 24. Animation loop var canvas = document.getElementById('game'); var context = canvas.getContext("2d"); var x = 0; setInterval(animate, 1000/30); function animate() { context.clearRect(0, 0, 800, 350); context.fillStyle = "green"; context.fillRect(x, 0, 100, 100); x += 1; }
  25. 25. Merci pour votre attention.

×