Your SlideShare is downloading. ×
04 html5 graphics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

04 html5 graphics

652

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
652
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 GraphicsDrawing shapes with the <canvas> tag
  • 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. 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. The canvas is laid out with coordinates—  The origin is in the upper-left—  Units are pixels
  • 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. fillRect(x, y, width, height) draws arectangle —  It uses the current fill style
  • 7. fillStyle andstrokeStyletells us whatkind of paintwere usingwhen wedraw—  CSS color—  A pattern—  A gradient
  • 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. clearRect(x, y,width, height)un-draws the pixels in the specified rectangle.
  • 10. Hands-on drawing rectangles
  • 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. Hands-on clearing the canvas
  • 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. But nothing actuallygets drawn until youtell it to with stroke() ctx.stroke();!
  • 15. Demo:Hands-onlines Drawing drawing lines
  • 16. You can draw curves with arc()—  An arc is a portion of a circle—  This is how well draw ◦  circles ◦  arc segments
  • 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. Demo: Hands-onarcs Drawing drawing arcs
  • 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. 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. 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. Font can be anything you would put in aCSS font rule—  font style—  font variant—  font weight—  font size—  line height—  font family
  • 23. Demo: Adding text text to drawings Hands-on adding to drawings
  • 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. Hands-on gradients
  • 26. Sometimes,though, wejust need toput animage inour canvas
  • 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. Demo: Adding images toimagescanvas Hands-on adding your
  • 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

×