O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Drawing with the HTML5 Canvas

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Carregando em…3
×

Confira estes a seguir

1 de 21 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a Drawing with the HTML5 Canvas (20)

Mais de Henry Osborne (20)

Anúncio

Mais recentes (20)

Drawing with the HTML5 Canvas

  1. 1. DRAWING WITH THE HTML5 CANVAS
  2. 2. HTML5 CANVAS  Grants you a very fine level of control over individual pixels on web page  Can be used to create anything using JavaScript:  Custom UI elements  Image Manipulation  Animations  Custom keyboard and mouse interfaces  Integrates seamlessly with video files, audio clips, and touchscreen events
  3. 3. CANVAS API  Created using the canvas element at any point within the <body> tag group  <canvas id=‘identifier’ height=‘500’ width=‘500’></canvas>  Canvas must be initialized in JavaScript in order to draw on it.  <script type=‘text/javascript’>  var canvas = document.getElementById(identifier);  var context = canvas.getContext(type);  //perform tasks here  </script>
  4. 4. CANVAS ELEMENT  The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag  It's important to understand the difference between the canvas element and the canvas context  The canvas element is the actual DOM node that's embedded in the HTML page.  The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2d or webgl (3d).  Each canvas element can only have one context.
  5. 5. <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do stuff here </script> </body>
  6. 6. DRAWING A LINE  To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods. 1. use the beginPath() method to declare that you are about to draw a new path 2. use the moveTo() method to position the context point (i.e. drawing cursor) 3. use the lineTo() method to draw a straight line from the starting position to a new position 4. to make the line visible, apply a stroke to the line using stroke()
  7. 7. DRAWING A LINE EXAMPLE <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); context.stroke(); </script>
  8. 8. DRAWING ARCS  To create an arc with HTML5 Canvas, we can use the arc() method.  Arcs are defined by:  a center point,  a radius,  a starting angle,  an ending angle, and  the drawing direction (either clockwise or anticlockwise).  Arcs can be styled with the lineWidth, strokeStyle, and lineCap properties.
  9. 9. DRAWING ARCS EXAMPLE <canvas id="myCanvas" width="578" height="250"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; var counterClockwise = false; context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15; // line color context.strokeStyle = 'black'; context.stroke(); </script>
  10. 10. DRAWING A RECTANGLE  To create a rectangle using HTML5 Canvas, we can use the rect() method rather than constructing the shape with 4 connecting lines.  The rectangle is positioned with x and y parameters, and is sized with width and height parameters.  The rectangle is positioned about its top left corner.
  11. 11. DRAWING A RECTANGLE EXAMPLE <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke(); </script>
  12. 12. DRAWING A CIRCLE To draw a circle with HTML5 Canvas, you can create a full arc using the arc() method by defining the starting angle as 0 and the ending angle as 2 * PI.
  13. 13. DRAWING A CIRCLE EXAMPLE <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); context.lineWidth = 5; context.strokeStyle = '#003300'; context.stroke(); </script>
  14. 14. DRAW A SEMI-CIRCLE To create a semicircle with HTML5 Canvas, we can create an arc using the arc() method and define the ending angle has startAngle + PI.
  15. 15. DRAWING A SEMI-CIRCLE EXAMPLE <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.arc(288, 75, 70, 0, Math.PI, false); context.closePath(); context.lineWidth = 5; context.fillStyle = ‘red'; context.fill(); context.strokeStyle = '#550000'; context.stroke(); </script>
  16. 16. LINEAR GRADIENTS To create a linear gradient with HTML5 Canvas, use the createLinearGradient() method. Linear gradients are defined by an imaginary line which defines the direction of the gradient. Insert colors using the addColorStop property.
  17. 17. RADIAL GRADIENTS To create a radial gradient with HTML5 Canvas, use the createRadialGradient() method. Radial gradients are defined with two imaginary circles - a starting circle and an ending circle, in which the gradient starts with the start circle and moves towards the end circle.
  18. 18. PATTERNS  To create a pattern with the HTML5 Canvas, use the createPattern() method of the canvas context which returns a pattern object,  Set the fillStyle property to the pattern object, and then fill the shape using fill().  The createPattern() method requires an image object and a repeat option, which can be repeat, repeat-x, repeat-y, or no- repeat.  Unless otherwise specified, the repeat option is defaulted to repeat.
  19. 19. IMAGES  To draw an image using HTML5 Canvas, use the drawImage() method which requires an image object and a destination point.  The destination point defines the top left corner of the image relative to the top left corner of the canvas.  Since the drawImage() method requires an image object, first create an image and wait for it to load before instantiating drawImage().  This is accomplished by using the onload property of the image object.
  20. 20. TEXT  Use the font property and the fillText() method of the canvas context.  To set the font, size, and style of HTML5 Canvas text,  set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces.  The style can be normal, italic, or bold. unless otherwise specified, the font style is defaulted to normal.  Once the font property has been set, draw the text with the fillText() method, which requires a string and an x and y position.
  21. 21. DRAWING WITH THE HTML5 CANVAS

×