Download to read offline
![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.](https://image.slidesharecdn.com/canvascharts-140604024449-phpapp01/85/Canvas-Charts-9-320.jpg)
![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.](https://image.slidesharecdn.com/canvascharts-140604024449-phpapp01/85/Canvas-Charts-11-320.jpg)
![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.](https://image.slidesharecdn.com/canvascharts-140604024449-phpapp01/75/Canvas-Charts-9-2048.jpg)
![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.](https://image.slidesharecdn.com/canvascharts-140604024449-phpapp01/75/Canvas-Charts-11-2048.jpg)
Uploaded bymyRent Channel Manager
Canvas & Charts
The document discusses HTML5's canvas element, illustrating its capabilities for dynamic rendering of 2D shapes, animations, and interactivity in web applications. It includes code examples for drawing and creating charts, emphasizing canvas's usability in various applications and the potential of real-time web functionality. The text also highlights external resources and tools for further exploration of HTML5 canvas features.
Canvas & Charts
- 1. Crtanje grafova Nove tehnologijeu 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.
- 7.
- 8. http://www.chartjs.org/ //Get thecontext 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.
- 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 Opisparametra 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 webfunctionality http://smoothiecharts.org/http://signalr.net
- 15.
- 16. Budućnost Novestvari 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.
- 17.
Editor's Notes
- #4 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!