HTML5 Canvas

From Fabelier
Jump to: navigation, search

Workshop about Canvas HTML5 by Raphael Velt

Contents

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 :

The Pros and Cons of Canvas :

Canvas Demos :


Canvas Manipulation Libraries


Data visualization Libraries


Other Libraries

sketch pad to test the example : http://velt.info/fabelier/


TECHNICAL PART

HELLO WORLD WITH CANVAS

<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>


DRAW A FLOWER :

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);
}

BEZIER CURVES

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();


TUTORIAL CREER UN CAMENBERT A PARTIR D'UN JSON :

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);


TUTORIAL CREER UN CAMEMBERT A PARTIR D'UN JSON :

EXEMPLE DE JSON ::

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}]})

LE JAVASCRIPT TO DRAW IT ::

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);


sources :: http://velt.info/fabelier/resources.html

Retrieved from "http://wiki.fabelier.org/index.php?title=HTML5_Canvas&oldid=11"
Personal tools
Namespaces

Variants
    Actions
      Navigation
      Toolbox