Fabelier

a * Lab to make things

User Tools

Site Tools

Trace: • configure_etherpad-lite • html5_canvas
doc:html5_canvas

Table of Contents

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.

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

doc/html5_canvas.txt · Last modified: 2015/02/18 22:30 by k4ngoo

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 3.0 Unported
CC Attribution-Share Alike 3.0 Unported Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki