Fabelier

a * Lab to make things

User Tools

Site Tools


doc:html5_canvas

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

doc:html5_canvas [2015/02/18 22:30] (current)
k4ngoo created
Line 1: Line 1:
 +====== HTML5 Canvas ======
 +From the workshop about Canvas HTML5 by Raphael Velt
 +
 +===== INTRODUCTION =====
 +
 +Invented by Apple for its Safari browser in 2004, the HTML markup and the JavaScript functions to handle it are now part of the official HTML5 specification and are supported in the last versions of all major browsers, including Internet Explorer 9 and the embedded browsers of both iOS and Android. Canvas draws graphics directly inside an HTML page and early adopting developers have used it to create games and animations that could only be done with Flash or Java applets.
 +After an introduction to the pros and cons of Canvas, we’ll guide you through basic examples to the building bricks of graphic development,​ then we’ll use Canvas together with the jQuery framework to call data from the Twitter API and create a basic, interactive data visualization application.
 +
 +===== LINK =====
 +
 +Basic Information,​ References, Tutorials :
 +
 +  * Mozilla Canvas Tutorial :: https://​developer.mozilla.org/​en/​Canvas_tutorial  ​
 +  * Tutoriel Canvas de Mozilla [fr] :: https://​developer.mozilla.org/​fr/​Tutoriel_canvas ​
 +  * Canvas Cheat Sheet :: http://​blog.nihilogic.dk/​2009/​02/​html5-canvas-cheat-sheet.html
 +  * Dive Into HTML5 :: http://​diveintohtml5.org/​canvas.html#​divingin
 +  * Six Revisions :: http://​sixrevisions.com/​html/​canvas-element/​
 +
 +The Pros and Cons of Canvas :
 +
 +  * Canvas vs. SVG, How to choose http://​blogs.sitepoint.com/​canvas-vs-svg-how-to-choose/​
 +  * Coding w/ Canvas vs. Coding w/ Flash https://​github.com/​blog/​621-bye-bye-flash-network-graph-is-now-canvas
 +  * Performance of Canvas vs. SVG http://​borismus.com/​canvas-vs-svg-performance/​
 +  * Performance of Canvas vs. Flash, HTML & SVG http://​www.themaninblue.com/​writing/​perspective/​2010/​03/​22/​
 +
 +Canvas Demos :
 +
 +  * The 1k Javascript demo contest http://​js1k.com/​
 +  * 10K Apart http://​js1k.com/​
 +  * List of JS Demos on Pouët http://​www.pouet.net/​prodlist.php?​platform%5B%5D=JavaScript
 +  * p01's releases http://​www.p01.org/​releases/​
 +  * Nihilogic Labs http://​www.nihilogic.dk/​labs/​
 +  * Mr. Doob http://​mrdoob.com/​
 +  * Chrome Experiments http://​www.chromeexperiments.com/​
 +  * Ben Joffe http://​www.benjoffe.com/​code/​
 +  * Doodling with the Canvas Element http://​monocubed.com/​visualisinghtml5/​
 +
 +Canvas Manipulation Libraries
 +
 +  * oCanvas: object-based Canvas drawing http://​ocanvas.org/ ​
 +  * easel http://​easeljs.com/​
 +  * Processing.js http://​processingjs.org/​
 +  * JcanvaScript http://​jcscript.com/​
 +  * Closure'​s goog.graphics.CanvasGraphics http://​closure-library.googlecode.com/​svn/​docs/​class_goog_graphics_CanvasGraphics.html
 +  * motion tween http://​davertron.com/​canvas_demo.html
 +
 +Data visualization Libraries
 +
 +  * Flot http://​code.google.com/​p/​flot/ ​
 +  * jQuery Sparklines http://​omnipotent.net/​jquery.sparkline/​
 +  * canvas express http://​www.canvasxpress.org/​
 +  * RGraph http://​www.rgraph.net/​
 +
 +
 +Other Libraries
 +
 +  * Canvas2Image:​ Saving canvas data to an image file http://​www.nihilogic.dk/​labs/​canvas2image/​
 +  * Explorer Canvas (uses VML) http://​code.google.com/​p/​explorercanvas/ ​
 +  * A list of Canvas Game Engines http://​ntt.cc/​2011/​01/​31/​66-open-source-javascript-game-engine-for-serious-developers.html
 +
 +sketch pad to test the example : 
 +http://​velt.info/​fabelier/​
 +
 +===== TECHNICAL PART =====
 +
 +==== HELLO WORLD WITH CANVAS ====
 +
 +<code html>
 +<​html>​
 + <​head>​
 +
 + </​head>​
 + <​body>​
 + <​canvas id="​mycanvas"​ width="​800"​ height="​600"​ />
 +
 + <​script type="​text/​javascript">​
 + var ctx = document.getElementById('​mycanvas'​).getContext('​2d'​);​
 + ctx.fillRect(50,​50,​50,​50);​
 + ctx.fillText('​Hello,​ world',​50,​ 150);
 + </​script>​
 +
 + </​body>​
 +</​html>​
 +</​code>​  ​
 +
 +==== DRAW A FLOWER : ====
 +
 +<code javascript>​
 +function hslToRgba(h,​ s, l, o){var r,g,b;if(s == 0){r=g=b=l;​}else{function hue2rgb(p,​q,​t){if(t<​0)t+=1;​if(t>​1)t-=1;​if(t<​1/​6)return p+(q-p)*6*t;​if(t<​1/​2)return q;​if(t<​2/​3)return p+(q-p)*(2/​3-t)*6;​return p;}var q=l<​0.5?​l*(1+s):​l+s-l*s;​var p=2*l-q;​r=Math.round(255*hue2rgb(p,​q,​h+1/​3));​g=Math.round(255*hue2rgb(p,​q,​h));​b=Math.round(255*hue2rgb(p,​q,​h-1/​3));​}var c=r+","​+g+","​+b;​return o?"​rgba("​+c+","​+o+"​)":"​rgb("​+c+"​)";​}
 +
 +function tracePetale(x,​y,​angle,​taille,​ couleur) {
 +  ctx.save();
 +  ctx.fillStyle = couleur;
 +  ctx.translate(x,​y);​
 +  ctx.rotate(angle);​
 +  ctx.beginPath();​
 +  ctx.moveTo(0,​0);​
 +  ctx.bezierCurveTo(-taille/​2,​-.7*taille,​-taille/​6,​-taille,​0,​-taille);​
 +  ctx.bezierCurveTo(taille/​6,​-taille,​taille/​2,​-.7*taille,​0,​0);​
 +  ctx.fill();
 +  ctx.restore();​
 +}
 +
 +var ctx = document.getElementById('​mycanvas'​).getContext('​2d'​);​
 +var nPetales = 12;
 +for (var i = 0; i < nPetales; i++) {
 +  var _angle = 2*i*Math.PI/​nPetales;​
 +  var _couleur = hslToRgba(i/​nPetales,​.5,​.5,​.9);​
 +  tracePetale(300,​300,​_angle,​100,​_couleur);​
 +}
 +</​code>​
 +
 +==== BEZIER CURVES ====
 +
 +<code javascript>​
 +CanvasRenderingContext2D.prototype.drawPoint = function(x,​y) {
 +  this.save();​
 +  this.beginPath();​
 +  this.strokeStyle="​rgb(100,​100,​100)";​
 +  this.lineWidth = "​1";​
 +  this.arc(x,​y,​2,​0,​2*Math.PI);​
 +  this.stroke();​
 +  this.restore();​
 +}
 +  ​
 +CanvasRenderingContext2D.prototype.commentedBezier = function(x1,​y1,​x2,​y2,​x3,​y3,​x4,​y4) {
 +  this.save();​
 +  this.strokeStyle = "​rgb(100,​100,​100)";​
 +  this.lineWidth = 1;
 +  this.beginPath();​
 +  this.moveTo(x1,​y1);​
 +  this.lineTo(x2,​y2);​
 +  this.moveTo(x3,​y3);​
 +  this.lineTo(x4,​y4); ​
 +  this.stroke();​
 +  this.drawPoint(x1,​y1);​
 +  this.drawPoint(x2,​y2);​
 +  this.drawPoint(x3,​y3);​
 +  this.drawPoint(x4,​y4);​
 +  this.restore();​
 +  this.beginPath();​
 +  this.moveTo(x1,​y1);​
 +  this.bezierCurveTo(x2,​y2,​x3,​y3,​x4,​y4);​
 +}
 +
 +var ctx = document.getElementById('​mycanvas'​).getContext('​2d'​);​
 +ctx.strokeStyle = "​rgb(0,​0,​200)";​
 +ctx.lineWidth = 4;
 +ctx.commentedBezier(100,​100,​50,​150,​200,​100,​100,​200);​
 +ctx.stroke();​
 +</​code>​
 +
 +
 +==== TUTORIAL CREER UN  CAMENBERT A PARTIR D'UN JSON : ====
 +
 +<code javascript>​
 +var ctx = document.getElementById('​mycanvas'​).getContext('​2d'​);​
 +
 +var _position = 0;
 +
 +setInterval(function() {
 +  _position = ((_position + 1) % 120);
 +  ctx.clearRect(0,​0,​600,​600);​
 +  ctx.fillStyle = "​rgb("​+(3*_position)+",​0,​0)";​
 +  ctx.fillRect(5*_position,​5*_position,​2*_position,​2*_position);​
 +},25);
 +</​code>​
 +
 +
 +==== TUTORIAL CREER UN  CAMEMBERT A PARTIR D'UN JSON : ====
 +
 +EXEMPLE DE JSON ::
 +
 +<code javascript>​
 +JSCallback({"​timeSlice":​
 +{"​elapsed":"​0:​42:​52.530415","​totalValue":​887,"​perHour":​61272,"​perDay":​1470546},"​hashTags":​
 +[{label:"​whytho",​value:​160},​
 +{label:"​np",​value:​91},​
 +{label:"​waterlooroad",​value:​84},​
 +{label:"​teamfollowback",​value:​78},​
 +{label:"​nowplaying",​value:​51},​
 +{label:"​uruned",​value:​49},​
 +{label:"​fb",​value:​43},​
 +{label:"​oomf",​value:​40},​
 +{label:"​happybirthdaythreecheersforsweetrevenge",​value:​37},​
 +{label:"​alicebucketlist",​value:​34},​
 +{label:"​rt",​value:​30},​
 +{label:"​odp",​value:​24},​
 +{label:"​bahrain",​value:​23},​
 +{label:"​lebronhairlinethemesong",​value:​22},​
 +{label:"​e3",​value:​21},​
 +{label:"​500aday",​value:​21},​
 +{label:"​fail",​value:​20},​
 +{label:"​nw",​value:​20},​
 +{label:"​checkuout",​value:​20},​
 +{label:"​instantfollowback",​value:​19},​
 +{label:"",​value:​0}]})
 +</​code>​
 +
 +LE JAVASCRIPT TO DRAW IT ::
 +
 +<code javascript>​
 +var ctx = document.getElementById('​mycanvas'​).getContext('​2d'​);​
 +var couleurs = [ "​red",​ "​lime",​ "​blue",​ "​yellow",​ "​white"​ ];
 +
 +
 +function JSCallback(data) {
 +  var somme = 0, depart = 0, fin, echelle;
 +  for (var i in data.hashTags) {
 +    somme += data.hashTags[i].value;​
 +  }
 +  echelle = 2*Math.PI/​somme;​
 +  ctx.translate(300,​300);​
 +  for (var i in data.hashTags) {
 +    fin = depart + data.hashTags[i].value;​
 +    ctx.fillStyle = couleurs[i % couleurs.length];​
 +    ctx.beginPath();​
 +    ctx.arc(0,​0,​200,​depart*echelle,​fin*echelle);​
 +    ctx.lineTo(0,​0);​
 +    ctx.fill();
 +    ctx.save();
 +    ctx.textBaseline = "​middle";​
 +    ctx.fillStyle = "​black";​
 +    ctx.font = "bold 14px sans-serif";​
 +    ctx.rotate((depart+fin)*echelle/​2);​
 +    ctx.fillText(data.hashTags[i].label,​80,​0);​
 +    ctx.restore();​
 +    depart = fin;
 +  }
 +}
 +
 +var myScript = document.createElement('​script'​);​
 +myScript.src = "​http://​172.30.26.115:​8082/​hashtag.json?​callback=JSCallback";​
 +document.body.appendChild(myScript);​
 +
 +</​code>​
 +
 +
 +
 +sources :: http://​velt.info/​fabelier/​resources.html
  
doc/html5_canvas.txt · Last modified: 2015/02/18 22:30 by k4ngoo