04 html5 graphics

  • 584 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
584
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
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