HTML Canvas pour les néophytes

| Gaëtan Renaudeau | Bovino |

Cette vidéo de 25 minutes présente les possibilités du Canvas à travers quelques démonstrations et l'implémentation pas à pas d'un exemple basique.

Elle est destinée à des développeurs débutant dans l'utilisation de Canvas.

Cet article a été publié avec l'aimable autorisation de Gaëtan Renaudeau, l'article original (HTML Canvas pour les néophytes) peut être vu sur le blog @GreWeb.

Commentez

- Titre : HTML Canvas pour les néophytes

- Auteurs : Gaëtan Renaudeau, Bovino

- Parution : 18 mai 2012

- Licence : Le contenu de cet article est rédigé par Gaëtan Renaudeau et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2013 Developpez.com.

Sommaire

- Vidéo (25 min)

- Liens de la vidéo

- Spécifications

- Exemples

- Bibliothèques graphiques

- Exemple de l'implémentation

- Remerciements

Vidéo (25 min)

Animation en format "vimeo" non supportée.
Contenu uniquement consultable en ligne à cette adresse :
https://player.vimeo.com/video/20957255

Liens de la vidéo

Spécifications

- whatwg.org/html

- Canvas

Exemples

- parcycle

- Visualisation des relations entre sujets (wikipédia)

- Same Game

- fizz : visualisation des tweets

Bibliothèques graphiques

- EaselJS

- Processing JS

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;
// Commence à tracer un chemin
ctx.beginPath();
// Définit le premier point de traçage à la position (0, 20).
ctx.moveTo(0, 20);
// Trace une ligne jusqu'à la position (canvas.width, 30).
// canvas.width désigne la largeur du canvas (500 dans notre exemple).
ctx.lineTo(canvas.width-100, 30);
ctx.bezierCurveTo(100, 200, 0, 100, 300, 300);
// Indique au canvas de dessiner le chemin tracé depuis le beginPath.
ctx.stroke();
*/

++ i;
}, 30);

}());
</script>
</body>
</html>

Remerciements

Cet article a été publié avec l'aimable autorisation de Gaëtan Renaudeau, l'article original (HTML Canvas pour les néophytes) peut être vu sur le blog @GreWeb.

Nous tenons à remercier Malikemal pour sa relecture attentive de cet article.