Canvas & Charts
•Descargar como PPTX, PDF•
1 recomendación•587 vistas
In this presentation we have explain how easy is to draw charts in canvas using just a few lines of javascript. We have present to types of chart line and polar and for drawing this charts we have used two commands: lineTo & ARC We have also present how to draw real time charts using SignalR technology. We have mange show the charts by adding just few lines of code…
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Canvas & Charts
Similar a Canvas & Charts (20)
Último
Último (20)
Canvas & Charts
- 1. Crtanje grafova Nove tehnologije u razvoju društva, © 2014
- 2. HTML Canvas Cookbook Preko 80 Canvas primjera Eric Rowell Publish by Packt Publishing Ltd. (Nov 2011) HTML5 Canvas – Native Interactivity and Animation for the Web Steve Fulton and Jeff Fulton Publis by O’Reilly Media Inc. (May 2011) Safari HTML5 Canvas Guide Apples Developers 2013-09-18 | Copyright © 2013 Apple Inc. All Rights Reserved. 227.4.2014.
- 3. HTML objekt The <canvas> tag is new in HTML5. APPLE > 2004 ; Standard > 2005 Javascript CSS Raster based Podržava video, audio, crtanje objekata igre, transformacije, animacije …allows dynamic, scriptable rendering of 2D shapes and bitmap images… 327.4.2014. Compatibility http://caniuse.com/canvas
- 4. <!DOCTYPE html> <html> <head> <script> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // crtanje… }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"> This text is displayed if your browser does not support HTML5 Canvas! </canvas> </body> </html> 427.4.2014.
- 5. window.onload = function(){ // get the canvas DOM element by its ID var canvas = document.getElementById("myCanvas"); // declare a 2-d context using the getContext() method of the // canvas object var context = canvas.getContext("2d"); // set the line width to 10 pixels context.lineWidth = 10; // set the line color to blue context.strokeStyle = "blue"; // position the drawing cursor context.moveTo(50, canvas.height - 50); // draw the line context.lineTo(canvas.width - 50, 50); // make the line visible with the stroke color context.stroke(); }; 527.4.2014.
- 6. http://www.mrspeaker.net/dev/parcycle/ http://bomomo.com/ http://hakim.se/experiments/html5/magnetic/02/ http://kennethjorgensen.com/blog/2014/canvas-trees/ http://www.relfind.com/game/magician.html http://hakim.se/experiments/html5/origami/ http://hakim.se/experiments/html5/wave/03/ http://hakim.se/experiments/html5/trail/03/ http://peterned.home.xs4all.nl/3d/ https://developer.mozilla.org/en-US/demos/detail/zen-photon-garden/launch http://codepen.io/suffick/pen/KrAwx http://www.freeriderhd.com/t/1010-contest-entry http://www.jqueryrain.com/?usKWk5aQ 627.4.2014.
- 8. http://www.chartjs.org/ //Get the context of the canvas element we want to select var ctx = document.getElementById("myChart").getContext("2d"); var myNewChart = new Chart(ctx).PolarArea(data); 827.4.2014.
- 9. var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", data: [65, 59, 90, 81, 56, 55, 40] }, { fillColor: "rgba(151,187,205,0.5)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", data: [28, 48, 40, 19, 96, 27, 100] } ] } 927.4.2014.
- 10. 1027.4.2014.
- 11. function CreatePieChart(c, data) { //dohvat objekata var ctx = c.getContext("2d"); var lastend = 0; //zadnja vrijednost var myTotal = 0; //ukupna vrijednost podataka var data = [200, 60, 15, 90]; //dodavanje vrijdnosti var myColor = ['red', 'green', 'blue', 'gray']; //uz vrijednosti, ide i boja //čistimo radnu površinu ctx.clearRect(0, 0, c.width, c.height); for (var e = 0; e < data.length; e++) { myTotal += data[e]; //zbrajamo ukupnu vrijednost } for (var i = 0; i < data.length; i++) { ctx.fillStyle = myColor[i]; //uzimamo boju ctx.beginPath(); //početak crtanja ctx.moveTo(c.width / 2, c.height / 2); //pozicioniramo se na početak ctx.arc(c.width / 2, c.height / 2, c.height / 2, lastend, lastend + (2 * Math.PI * (data[i] / myTotal)), false); ctx.lineTo(c.width / 2, c.height / 2); //crtamo liniju prema centru ctx.fill(); //punimo se bojom lastend += Math.PI * 2 * (data[i] / myTotal); //pamtimo zadnju poziciju } } 1127.4.2014.
- 12. 27.4.2014. 12 Parametar Opis parametra x The x-coordinate of the center of the circle y The y-coordinate of the center of the circle r The radius of the circle sAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) eAngle The ending angle, in radians counterclock wise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
- 13. Prikupiti podatke Više izvora Jedna HTML stranica No refresh!!! Prikazati na grafu Promjene… Prezentacija 27.4.2014. 13
- 14. 27.4.2014. 14 SignalR real-time web functionality http://smoothiecharts.org/http://signalr.net
- 16. Budućnost Nove stvari Frameworci Aplikacije Prezentacije Poslovni sustavi …. Jednostavnost & Fleksibilnost Javascript Odlične performanse 1627.4.2014. No matter what platform or tools you use, the HTML5 revolution will soon change the way you build web applications, if it hasn't already.
Notas del editor
- HTML5 Canvas offers developers the chance to create animated graphics in ordinary web browsers using common tools: HTML and JavaScript. Canvas is one of the most visible parts of HTML5, fueling demo after demo, game after game. It offers interactivity with great visuals, and provides tremendous freedom to do whatever you want in the browser window. However, it differs enough from typical JavaScript development (as well as Flash and Silverlight development) that it needs careful exploration!