HTML5 GraphicsDrawing shapes with the <canvas> tag
Graphics were always limited toexternal images—  jpgs, gifs, pngs<img src="VaderAttacks.jpg" />!—  Therewas no way to cr...
But HTML5 introduced the <canvas>                    allows        —  Canvas st about            draw ing ju             ...
The canvas is laid out with coordinates—  The origin is in the upper-left—  Units are pixels
We need some JavaScript to draw onthe canvasfunction drawOnCanvas() {!   var canvas = document.getElementById("cv");!   va...
fillRect(x, y, width, height) draws arectangle                         —  It uses the current                            ...
fillStyle andstrokeStyletells us whatkind of paintwere usingwhen wedraw—  CSS color—  A pattern—  A gradient
strokeRect(x, y, width, height) draws arectangle with the current stroke style—  fillRect         draws it and fills it. ...
clearRect(x, y,width, height)un-draws the pixels in the   specified  rectangle.
Hands-on drawing rectangles
You can erase the canvas by setting itswidth or height—  You   don’t even need to change the width var cv = document.getE...
Hands-on clearing the canvas
We draw paths with moveTo(), lineTo()and stroke()—  Merely   moves the penctx.moveTo(100, 10);!—  Draws    a linectx.lin...
But nothing actuallygets drawn until youtell it to with stroke()        ctx.stroke();!
Demo:Hands-onlines     Drawing drawing lines
You can draw curves with arc()—  An arc is a portion of a circle—  This is how well draw  ◦  circles  ◦  arc segments
Arc isnt easy to work witharc(x, y, radius, startAngle, endAngle, direction);—  Where:  ◦  x, y: the center of the circle...
Demo: Hands-onarcs      Drawing drawing arcs
There are some other ways to drawcurves—  ctx.quadraticCurveTo(cpx,cpy,x,y);—  ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y...
We add text to our drawings withfillText()—  context.fillText(textstring, x, y);context.font = "bold 12px arial";!context...
CSS styling is not available to the text on canvases—  We  can set a font,    color and size—  But we cannot do it    wi...
Font can be anything you would put in aCSS font rule—  font style—  font variant—  font weight—  font size—  line hei...
Demo: Adding text text to drawings Hands-on adding to drawings
Gradients can add realism to drawingsvar grad = !context.createLinearGradient(0,0,30,25);!grad.addColorStop(0, #0f0);!grad...
Hands-on gradients
Sometimes,though, wejust need toput animage inour canvas
drawImage() allows us to include anexisting jpg, gif, or png—  Get   the drawing firstvar vader = new Image();!vader.src ...
Demo: Adding images toimagescanvas    Hands-on adding your
Conclusion—  HTML5     canvas suddenly makes it possible to    create drawings, games and other RIA without    Flash, Sil...
Upcoming SlideShare
Loading in...5
×

04 html5 graphics

694

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
694
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

04 html5 graphics

  1. 1. HTML5 GraphicsDrawing shapes with the <canvas> tag
  2. 2. Graphics were always limited toexternal images—  jpgs, gifs, pngs<img src="VaderAttacks.jpg" />!—  Therewas no way to create dynamic or original graphics in HTML
  3. 3. But HTML5 introduced the <canvas> allows —  Canvas st about draw ing ju anything cv" s id=" < canva 00" wid th="1 0" />! 0 heig ht="1
  4. 4. The canvas is laid out with coordinates—  The origin is in the upper-left—  Units are pixels
  5. 5. We need some JavaScript to draw onthe canvasfunction drawOnCanvas() {! var canvas = document.getElementById("cv");! var ctx = canvas.getContext("2d");! ctx.fillRect(50, 25, 150, 100);!}!
  6. 6. fillRect(x, y, width, height) draws arectangle —  It uses the current fill style
  7. 7. fillStyle andstrokeStyletells us whatkind of paintwere usingwhen wedraw—  CSS color—  A pattern—  A gradient
  8. 8. strokeRect(x, y, width, height) draws arectangle with the current stroke style—  fillRect draws it and fills it. strokeRect only draws the lines
  9. 9. clearRect(x, y,width, height)un-draws the pixels in the specified rectangle.
  10. 10. Hands-on drawing rectangles
  11. 11. You can erase the canvas by setting itswidth or height—  You don’t even need to change the width var cv = document.getElementById("cv");!cv.width = cv.width; !
  12. 12. Hands-on clearing the canvas
  13. 13. We draw paths with moveTo(), lineTo()and stroke()—  Merely moves the penctx.moveTo(100, 10);!—  Draws a linectx.lineTo(200, 10);!ctx.lineTo(200, 110);!
  14. 14. But nothing actuallygets drawn until youtell it to with stroke() ctx.stroke();!
  15. 15. Demo:Hands-onlines Drawing drawing lines
  16. 16. You can draw curves with arc()—  An arc is a portion of a circle—  This is how well draw ◦  circles ◦  arc segments
  17. 17. Arc isnt easy to work witharc(x, y, radius, startAngle, endAngle, direction);—  Where: ◦  x, y: the center of the circle ◦  startAngle, endAngle: The angle in radians that the arc starts and ends. 0=straight left ◦  direction: true=counterclockwise & false=clockwise—  Example: circlectx.arc(x, y, radius, 0, Math.PI * 2, true); !
  18. 18. Demo: Hands-onarcs Drawing drawing arcs
  19. 19. There are some other ways to drawcurves—  ctx.quadraticCurveTo(cpx,cpy,x,y);—  ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);—  ctx.arcTo(x1,y1,x2,y2,radius);
  20. 20. We add text to our drawings withfillText()—  context.fillText(textstring, x, y);context.font = "bold 12px arial";!context.fillText("Liz", 200, 40);!context.fillText("Lemon", 200, 60);!
  21. 21. CSS styling is not available to the text on canvases—  We can set a font, color and size—  But we cannot do it with styles—  No: ◦  padding ◦  margins ◦  wrapping
  22. 22. Font can be anything you would put in aCSS font rule—  font style—  font variant—  font weight—  font size—  line height—  font family
  23. 23. Demo: Adding text text to drawings Hands-on adding to drawings
  24. 24. Gradients can add realism to drawingsvar grad = !context.createLinearGradient(0,0,30,25);!grad.addColorStop(0, #0f0);!grad.addColorStop(1, #e49);!context.fillStyle = grad;!context.fillRect(0, 0, 300, 225);!
  25. 25. Hands-on gradients
  26. 26. Sometimes,though, wejust need toput animage inour canvas
  27. 27. drawImage() allows us to include anexisting jpg, gif, or png—  Get the drawing firstvar vader = new Image();!vader.src = "images/vaderAttacks.jpg";!—  Draw image starting at (x, y)ctx.drawImage(vader, x, y);!—  Draw image starting at (x, y) and scale it to (w, h)drawImage(vader, x, y, w, h);!
  28. 28. Demo: Adding images toimagescanvas Hands-on adding your
  29. 29. Conclusion—  HTML5 canvas suddenly makes it possible to create drawings, games and other RIA without Flash, Silverlight or other plug-ins—  The low-level access to the canvass context allows you to draw just about anything—  We can include text and images in addition to rectangles, lines, and arcs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×