HTML - CANVASCrtanje grafova
Nove tehnologije u razvoju društva, © 2014
2
LITERATURAHTML 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.
27.4.2014.
3
UVOD 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…27.4.2014.
Compatibilityhttp://caniuse.com/canvas
4
IMPLEMENTACIJA<!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>
27.4.2014.
5
CRTANJE LINIJE 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(); };
27.4.2014.
6
PRIMJERI 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/?usKWk5aQ27.4.2014.
7
GRAFOVIhttp://chartjs.devexpress.com/?
gclid=CMuS3a_fgL4CFWzHtAodFwQAkw
http://blog.isomorphic.com/html5-charts-with-mobile-support/?gclid=CJuypLDfgL4CFZDKtAodFS4AKA
http://www.chartjs.org/
http://igrapher.com/#
http://canvasjs.com/
27.4.2014.
8
CHART.JS 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);
27.4.2014.
9
PODACI
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] } ] }
27.4.2014.
10
CRTANJE GRAFA
27.4.2014.
11
CRTANJE GRAFAfunction 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 }}
27.4.2014.
12
ARC NAREDBA
27.4.2014.
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
counterclockwise
Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
13
REAL TIME Prikupiti podatke
Više izvora Jedna HTML stranica No refresh!!!
Prikazati na grafu Promjene… Prezentacija
27.4.2014.
14
SIGNALR & SMOOTHE CHARTS
27.4.2014.
SignalRreal-time web functionality
http://smoothiecharts.org/http://signalr.net
15
DEMO
27.4.2014.
http://bit.ly/1fq7OpRhttp://is.gd/v7p8MX
16
ZAKLJUČAK Budućnost
Nove stvari Frameworci Aplikacije Prezentacije Poslovni sustavi ….
Jednostavnost & Fleksibilnost Javascript Odlične performanse
27.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.