Drawing on canvas
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Drawing on canvas

on

  • 954 views

 

Statistics

Views

Total Views
954
Views on SlideShare
947
Embed Views
7

Actions

Likes
0
Downloads
12
Comments
0

2 Embeds 7

http://andstudy.com 6
http://www.andstudy.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Drawing on canvas Presentation Transcript

  • 1. DRAWING ON CANVAS chapter 6
  • 2. Javascript + canvas    - Drawing a Logo    - Graphing Statistics with RGraph
  • 3.  The Canvas Element<canvas id="my_canvas" width="150" height="150">  Fallback content here </canvas>cant use css
  • 4.  var canvas = document.getElementById(my_canvas);if (canvas.getContext){    var context = canvas.getContext(2d);}else{}
  • 5. canvas_simple_drawing.htmlvar canvas = document.getElementById(my_canvas);  if (canvas.getContext){  var context = canvas.getContext(2d);   context.fillStyle = "rgb(200,0,0)";   context.fillRect (10, 10, 100, 100);   context.fillStyle = "rgb(0,0,200)";   context.fillRect (30, 30, 100, 100);   context.strokeStyle = "rgb(200,0,0)";   context.lineWidth = 2; context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 100); context.stroke(); context.closePath();}........
  • 6. Drawing the logostring of text, an angeld path, a squeare, a triangleAdding Text    c o n t e x t . f o n t = i t a l i c 4 0 p x s a n s - s e r i f ;   c o n t e x t . t e x t B a s e l i n e = t o p ;   c o n t e x t . f i l l T e x t ( A w e s o m e C o , 6 0 , 0 ) ;
  • 7. Drawing the LogoDrawing lines    c o n t e x t . lineWidth=2;    c o n t e x t . beginPath();    c o n t e x t . moveTo(0,40);    c o n t e x t . lineTo(30,0);    c o n t e x t . lineTo(60,40);    c o n t e x t . lineTo(285,40);    c o n t e x t . stroke();    c o n t e x t . c l o s e P a t h ( ) 
  • 8. Drawing the LogoMoving the Origin    c o n t e x t . s a v e ( ) ;    c o n t e x t . t r a n s l a t e ( 2 0 , 2 0 ) ;    c o n t e x t . f i l l R e c t ( 0 , 0 , 2 0 , 2 0 ) ;
  • 9. Drawing the LogoDrawing a triangle    c o n t e x t . f i l l S t y l e = # f f f     c o n t e x t . s t r o k e S t y l e = # f f f ;    c o n t e x t . l i n e W i d t h = 2 ;    c o n t e x t . b e g i n P a t h ( ) ;    c o n t e x t . m o v e T o ( 0 , 2 0 ) ;    c o n t e x t . l i n e T o ( 1 0 , 0 ) ;    c o n t e x t . l i n e T o ( 2 0 , 2 0 ) ;    c o n t e x t . l i n e T o ( 0 , 2 0 ) ;    c o n t e x t . f i l l ( ) ;    c o n t e x t . c l o s e P a t h ( ) ;    c o n t e x t . r e s t o r e ( ) ;
  • 10. Drawing the LogoAddingColors// context.fillStyle = "#f00";// context.strokeStyle = "#f00";var gradient = context.createLinearGradient(0, 0, 0, 40);gradient.addColorStop(0, #a00); // redgradient.addColorStop(1, #f00); // redcontext.fillStyle = gradient;context.strokeStyle = gradient;
  • 11. Falling backGoogle released a library called ExplorerCanvas<scriptsrc="javascripts/excanvas.js"></script>
  • 12. Graphing Statistics with RGraph<canvas width="500" height="250" id="test">[no canvassupport]</canvas> <script type="text/javascript" charset="utf-8">  var bar = new RGraph.Bar(test, [50,25,15,10]); bar.Set(chart.gutter, 50); bar.Set(chart.colors, [red]); bar.Set(chart.title, "A bar graph of my favorite pies"); bar.Set(chart.labels, ["Banana Creme", "Pumpkin", "Apple", "Cherry"]);  bar.Draw();  </script>
  • 13.  Describing Data with HTML<div id="graph_data"> <h1>Browser share for this site</h1><ul> <li> <p data-name="Safari 4" data-percent="15"> Safari 4 -15% </p> </li> <li> <p data-name="Internet Explorer" data-percent="55"> Internet Explorer - 55% </p> </li> <li> <p data-name="Firefox" data-percent="14"> Firefox - 14% </p> </li><li> <p data-name="Google Chrome" data-percent="16">Google Chrome - 16% </p> </li> </ul> </div>
  • 14.  load libraries<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script src="javascripts/RGraph.common.js" ></script> <scriptsrc="javascripts/RGraph.bar.js" ></script>
  • 15.  Turning Our HTML into a Bar Graphfunction canvasGraph(){ var title = $(#graph_data h1).text();var labels = $("#graph_data>ul>li>p[data-name]").map(function(){ return $(this).attr("data-name"); });var percents = $("#graph_data>ul>li>p[data-percent]").map(function(){ return parseInt($(this).attr("data-percent")); });var bar = new RGraph.Bar(browsers, percents); bar.Set(chart.gutter, 50); bar.Set(chart.colors, [red]); bar.Set(chart.title, title); bar.Set(chart.labels, labels); bar.Draw();}
  • 16. Displaying Alternative Contentvar canvas = document.getElementById(browsers);  if (canvas.getContext){  $(#graph_data).hide();  canvasGraph();  }
  • 17. Falling backfunction divGraph(barColor, textColor, width, spacer,lblHeight){  $(#graph_data ul).hide();  var container = $("#graph_data");  container.css( { "display" : "block", "position" : "relative","height": "300px"} );$("#graph_data>ul>li>p").each(function(i){     var bar = $("<div>" + $(this).attr("data-percent") + "%</div>");    var label = $("<div>" + $(this).attr("data-name") +"</div>");               var commonCSS = { "width": width + "px","position" : "absolute", "left" : i * (width + spacer) + "px"}; varbarCSS = { "background-color" : barColor, "color" : textColor,
  • 18. The Future