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

Drawing on canvas

on

  • 922 views

 

Statistics

Views

Total Views
922
Views on SlideShare
915
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 Drawing on canvas Presentation Transcript

  • DRAWING ON CANVAS chapter 6
  • Javascript + canvas    - Drawing a Logo    - Graphing Statistics with RGraph
  •  The Canvas Element<canvas id="my_canvas" width="150" height="150">  Fallback content here </canvas>cant use css
  •  var canvas = document.getElementById(my_canvas);if (canvas.getContext){    var context = canvas.getContext(2d);}else{}
  • 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();}........
  • 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 ) ;
  • 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 ( ) 
  • 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 ) ;
  • 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 ( ) ;
  • 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;
  • Falling backGoogle released a library called ExplorerCanvas<scriptsrc="javascripts/excanvas.js"></script>
  • 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>
  •  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>
  •  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>
  •  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();}
  • Displaying Alternative Contentvar canvas = document.getElementById(browsers);  if (canvas.getContext){  $(#graph_data).hide();  canvasGraph();  }
  • 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,
  • The Future