Cette vidéo de 20 minutes présente les possibilités du Canvas à travers quelques démos et l’implémentation pas à pas d’un exemple basique.
Elle est destinée à des développeurs débutant dans l’utilisation de Canvas.
Dans la suite de l’article : les liens et codes de la vidéo …
Liens
Specs
Exemples
- parcycle
- Visualisation des relations entre sujets (wikipédia)
- Same Game
- fizz : visualisation des tweets
Bibliothèques graphiques
Exemple de l’implémentation
<html>
<head>
<style>
body {
background: #ddd;
}
canvas {
background: #fff;
}
</style>
</head>
<body>
<canvas id="sketch" width="300" height="300"></canvas>
<img id="image" src="http://www.whatwg.org/images/logo" style="display: none;" />
<script type="text/javascript">
(function(){
var canvas = document.getElementById('sketch');
var ctx = canvas.getContext('2d');
var img = document.getElementById('image');
var i = 0;
setInterval(function() {
ctx.clearRect(0, 0, 300, 300);
ctx.drawImage(img, 0, 0, 300, 300);
ctx.fillStyle = 'rgba(255, 0, '+Math.floor(Math.sin(i/50)*255)+', 0.8)';
ctx.fillRect(100, i % 300, 100, 100);
/*
ctx.strokeStyle = '#09F';
ctx.lineWidth = 5;
ctx.beginPath(); // commence à tracer un chemin
ctx.moveTo(0, 20); // défini le premier point de tracage à la position (0, 20)
ctx.lineTo(canvas.width-100, 30); // Tracer une ligne jusqu'à la position (canvas.width, 30). canvas.width désigne la largeur du canvas (500 dans notre exemple).
ctx.bezierCurveTo(100, 200, 0, 100, 300, 300);
ctx.stroke(); // Indique au canvas de dessiner le chemin tracé depuis le beginPath
*/
++ i;
}, 30);
}());
</script>
</body>
</html>