Click here to load reader
Upload
suitzero
View
770
Download
0
Embed Size (px)
Citation preview
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>
can't use css
var canvas = document.getElementById('my_canvas');if (canvas.getContext){ var context = canvas.getContext('2d');}else{
}
canvas_simple_drawing.html
var 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 logo
string of text, an angeld path, a squeare, a triangle
Adding 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 Logo
Drawing lines 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 , 4 0 ) ; c o n t e x t . l i n e T o ( 3 0 , 0 ) ; c o n t e x t . l i n e T o ( 6 0 , 4 0 ) ; c o n t e x t . l i n e T o ( 2 8 5 , 4 0 ) ; c o n t e x t . s t r o k e ( ) ; c o n t e x t . c l o s e P a t h ( )
Drawing the Logo
Moving 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 Logo
Drawing 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 Logo
A d d i n g C o l o r s// context.fillStyle = "#f00";// context.strokeStyle = "#f00";var gradient = context.createLinearGradient(0, 0, 0, 40);gradient.addColorStop(0, '#a00'); // red gradient.addColorStop(1, '#f00'); // red context.fillStyle = gradient; context.strokeStyle = gradient;
Falling back
Google released a library called ExplorerCanvas
< s c r i p t s r c = " j a v a s c r i p t s / e x c a n v a s . j s " > < / s c r i p t >
Graphing Statistics with RGraph
<canvas width="500" height="250" id="test">[no canvas support]</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> <script src="javascripts/RGraph.bar.js" ></script>
Turning Our HTML into a Bar Graph
function 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 Content
var canvas = document.getElementById('browsers'); if (canvas.getContext){ $('#graph_data').hide(); canvasGraph(); }
Falling back
function 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"}; var barCSS = { "background-color" : barColor, "color" : textColor, "bottom" : lblHeight + "px", "height" : $(this).attr("data-percent") + "%" }; var labelCSS = {"bottom" : "0", "text-align" : "center"}; bar.css( $.extend(barCSS, commonCSS) ); label.css( $.extend(labelCSS,commonCSS) ); container.append(bar); container.append(label); }); }
The Future