Contenu connexe


Advanced html5 diving into the canvas tag

  1. A blank slate to draw graphs, game graphics, video, or other visual images on the fly.”
  2. • 2D drawing tool within all modern browsers • No downloads (plugins) required! • Openly developed by the WC3 (WWW consortium)
  3. Introduced by Apple, as part of WebKit in 2004, to show the power of desktop apps within their Safari browser. Now a standard!
  4. <canvas id=“myCanvas" width="150" height="150"></canvas> • Only 2 attributes: Width & Height • Default values for width and height: 300px x 150px
  5. Older browsers may not support the <canvas> element Therefore, we insert fallback text, just in case it won’t display <canvas id=“myChart" width="150" height="150"> Current version of IE: 11 </canvas>
  6. var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here: Hey, you need to update your browser! }
  7. The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper- left corner of the canvas. Along the X-axis, values increase from left to right. Along the Y-axis, values increase from top to bottom.
  8. var canvas = document.getElementById(‘myCanvas'); var ctx = canvas.getContext('2d');
  9. var canvas = document.getElementById(“myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(50, 25, 150, 100); Parameters: X: The x-coordinate of the upper-left corner of the rectangle Y The y-coordinate of the upper-left corner of the rectangle Width: The width of the rectangle, in pixels Height: The height of the rectangle, in pixels
  10. •fillStyle: can be a CSS color, a pattern, or a gradient. (Default color is black) •strokeStyle: like fillStyle, but used for lines •fillRect( x, y, width, height) draws a rectangle filled with the current fill style. •strokeRect(x, y, width, height) draws an rectangle w/ current stroke style. Only draws edges. •clearRect( x, y, width, height) clears the pixels in the specified rectangle.
  11. <canvas id="myCanvas" width=“300" height="150"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect (0, 0, 300, 150); ctx.clearRect(20, 20, 100, 50);
  12. <canvas id="myCanvas" width=200 height=120></canvas> var canvas = document.getElementById('myCanvas'); var ctxt = canvas.getContext('2d'); ctx.fillStyle = '#000000'; // set color to black ctx.fillRect(0, 0, 200, 40); // draw (200x40 pixel) rectangle at (0,0 ctx.fillStyle = '#FF0000'; // set color to red ctx.fillRect(0, 40, 200, 40); // draw (200x40 pixel) rectangle at (0,40) ctx.fillStyle = '#FFCC00'; // set color to gold ctx.fillRect(0, 80, 200, 40); // draw (200x40 pixel) rectangle at (0,80)
  13. • Scale(): Scales the current drawing, bigger or smaller • Rotate(): Rotates current drawing • Translate(): Moves the (0,0) position on the canvas • Transform(): Replaces current transform matrix for current drawing • setTransform(): Resets current transform matrix to the identity matrix, then runs transform()
  14. <canvas id="myCanvas" width="300" height="200"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.rotate(20 * Math.PI / 180); ctx.fillRect(50, 20, 100, 50); Save & Restore context Save & Restore context (cont’d) To calculate from degrees to radians: degrees * Math.PI/180
  15. <canvas id="myCanvas" width=“300" height=“300"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(5, 5, 100, 30); // draw first rectangle ctx.scale(2,2); // 2x width, 2x height ctx.strokeRect(5, 5, 100, 30); // draw second triangle
  16.,0,0,1,0,0 A – Scales the drawing horizontally B – Skew the drawing horizontally C- Skew the drawing vertically D - Scale the drawing vertically E – Moves the drawing horizontally F – Moves the drawing vertically
  17. <canvas id="myCanvas" width=“300" height=“300"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillRect (10, 10, 100, 50); ctx.translate(70, 70); ctx.fillRect (10, 10, 100, 50);
  18. Three steps are required: 1. Begin the path – beginPath() 2. Move the points – moveTo() or lineTo() 3. Stroke (outline) / Fill the path – stroke() or fill() 4. *Close the path – closePath() *Note: When you call fill(), any open shapes are closed automatically, so you don’t need to call closePath(). This is not true when you use stroke(), though.
  19. Moves the “pencil” to the x, y coordinates Doesn’t draw anything, but becomes part of the path Think of it as lifting a pencil, then places it at this spot
  20. Drags the “pencil” to the x, y coordinates
  21. var canvas = document.getElementById(‘myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); // starts drawing ctx.moveTo(75,50); // First point (left) ctx.lineTo(100,75); // Bottom point ctx.lineTo(100,25); // Top point ctx.fill(); // black is default }
  22. Unlike text on a webpage, there is no box model, so CSS layout techniques are not available, such as: - float, margin, padding, word wrap Available attributes: • font (style, font variant, weight, size, line height, family) • textAlign (start, end, left, right, center) • TextBaseline (top, hanging, middle, alphabetic, ideographic, bottom)
  23. <canvas id=“myCanvas" width=“150” height=“100”></canvas> var canvas = document.getElementById ('myCanvas'); // access the canvas object var ctx = canvas.getContext ('2d'); // access the canvas context ctx.fillRect (5,5,140,50); // fill rectangle with black color ctx.fillStyle = 'red'; // set text color to 'red' ctx.font = '40pt Arial'; // define the CSS font for writing text ctx.fillText ('Text',1 0,50); // write the text 'Text‘
  24. var canvas =document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var grd = ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(0,0,150,100); Smooth transition between two colors
  25. CSS Gradients Canvas gradients aren’t widely used Instead, most developers prefer
  26. #grad { background: -webkit-linear-gradient(left, white, black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right white, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, white, black); /* Standard syntax */ }
  27. Impact.js Turbulenz Paper.js Canvas.js Processing.js EaselJS HTML5 Canvas Tutorials
  28. Link to HTML5 cheat sheet

Notes de l'éditeur

  1. You can have more than one <canvas> element on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element.
  2. Scripts can also check for support programatically by simply testing for the presence of the getContext() method.
  3. Default color is black
  4. The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.
  5. Visual Studio
  6. Default color is black
  7. Default color is black