Canvas
Upcoming SlideShare
Loading in...5
×
 

Canvas

on

  • 1,412 views

This presentation shows different features HTML

This presentation shows different features HTML

Statistics

Views

Total Views
1,412
Views on SlideShare
1,405
Embed Views
7

Actions

Likes
1
Downloads
17
Comments
0

3 Embeds 7

http://localhost 5
http://www.linkedin.com 1
http://staging3.inceptum.eu 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Canvas Canvas Presentation Transcript

  • HTML-5 Canvas
  • Agenda
    • Where it has started
    • What change can it bring?
    • Understanding the lingo
    • Basic usage
    • Drawing shapes
    • Using images
    • Applying styles and colors
    • Transformations
    • Compositing
    • Basic animations
  • History
  • Canvas vs SVG
    • High performance
    • Everything is a pixel.
    • Save the resulting image as a .png or .jpg.
    • For generating raster graphics where pixel-level manipulation is needed.
    • Resolution independence
    • Elements can be animated using a declarative syntax, or via JavaScript.
    • Full control over each element
  • Lingo
  • What it is not
  • First kicks <canvas id=&quot;stockGraph&quot; width=&quot;150&quot; height=&quot;150&quot;> You browser doesn't support canvas. </canvas> var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); }
  • Basic shapes Rectangle : fillRect(x,y,width,height) strokeRect(x,y,width,height) clearRect(x,y,width,height) Circle: arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • Paths beginPath() closePath() stroke() Fill() moveTo(x, y) lineTo(x, y)
  • Exercise - 1
  • Solution
    • ctx.beginPath();
    • ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    • ctx.moveTo(110,75);
    • ctx.arc(75,75,35,0,Math.PI,false); // Mouth(clockwise)
      • ctx.moveTo(40,75);
      • ctx.lineTo(110,75);
    • ctx.moveTo(65,65);
    • ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
    • ctx.moveTo(95,65);
    • ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
    • ctx.stroke();
  • Beziere curves quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  • Styling lineWidth = value lineCap = type lineJoin = type miterLimit = value fillStyle = color strokeStyle = color ctx.globalAlpha = 0...1; createLinearGradient(x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) addColorStop(position, color) var ptrn =ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn;
  • Images var img = new Image(); img.src = 'myImage.png'; // Set source path OR Img = 'data:image/gif;base64,R0lGO......' drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
  • Transformations translate(x, y) rotate(alpha)
  • Compositing globalCompositeOperation = [type] ctx.beginPath(); drawAPath(); ctx.clip();
  • Animate
    • Clear the canvas
    • Save the canvas state
    • Draw animated shapes
    • Restore the canvas state
    setInterval(animateShape,500); setTimeout(animateShape,500);
  • Canvas vs Flash