Javascript & Canvas
1. HTML
The canvas element provides scripts with a resolution-
dependent bitmap canvas, which can be used for rendering
graphs, ga...
The HTML5 <canvas> tag is used to draw graphics, on the
fly, via scripting (usually JavaScript).
Canvas (2)
w3schools.com
Which browsers does Canvas support?
Source : http://caniuse.com
Use canvas
<canvas id="game" width="600" height="350"></canvas>
2. Javascript
The CanvasRenderingContext2D interface provides the 2D
rendering context for the drawing surface of a <canvas> element.
Ca...
Canvas context (2)
var canvas = document.getElementById('game');
console.log(canvas); // <canvas id="game" width="800" hei...
Canvas Coordinates
X
Y
[0, 0]
[300, 175]
[600, 350]
Styles
Fill Stroke
2.1 Drawing
Drawing rectangles
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.fillRect(0,...
Drawing lines
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.beginPath();
co...
Drawing text
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.fillText("Hello w...
Drawing images
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
var logo = new Image()...
Erasing
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.clearRect(10, 10, 100...
2.2 Style
Colors (1)
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.fillStyle = "blue";...
Colors (2)
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.strokeStyle = "blu...
Text
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.font = "30px Comic Sans ...
3 Animate
setInterval()
function sayHello(){
alert('Hello!');
}
setInterval(sayHello, 2000);
setInterval(function(){
alert('Hello!')...
Animation loop
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
var x = 0;
setInterval...
Merci pour votre attention.
Prochain SlideShare
Chargement dans…5
×

Javascript #10 : canvas

452 vues

Publié le

Javascript #10 : canvas

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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.

×