mercredi 25 janvier 2012
Dessiner un coeur avec le canvas HTML5 et passer pour un grand sentimental
Publié par Infinite Loop, à 08 h 33
2 commentaires
La St-Valentin approche à grands pas et on le sait, il n'y a rien de plus romantique qu'envoyer un coeur en HTML5 à sa bien-aimée. Genre.
Ce n'est pas comme si j'avais fait ça souvent dans ma vie (surtout que j'ai rencontré ma copine à l'époque où le HTML 4.x était encore à la mode). Alors je me suis tourné vers les explications de la géométrie pour enfants qui illustre une méthode facile en utilisant des arcs de cercles. On peut imaginer le tracé par le schéma suivant :
Le code :
var canvas = document.getElementById('myCanvas');Résultat :
var context = canvas.getContext('2d');
context.translate(100,100);
context.strokeStyle = '#FF0000'; // rouge, évidemment
context.lineWidth = 5;
context.beginPath();
context.arc(0, 0, 50, 90*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();
context.beginPath();
context.arc(0, 100, 50, 270*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();
context.beginPath();
context.arc(100, 0, 50, Math.PI, 90*(Math.PI/180), false);
context.stroke();
context.closePath();
context.beginPath();
context.arc(100, 100, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.stroke();
context.closePath();
"Ah que c'est cute !"
- Une fille qui tombe en amour avec le HTML5
J'avoue qu'au début, je pensais utiliser une équation pour calculer une cardioïde mais la pointe du bas si caractéristique à la représentation qu'on se fait d'un coeur stylisé était absente. Ainsi, elle y est, malgré qu'elle soit un peu trop prononcée.
Sans blague, célébrez-vous cette fête de l'amour ? Quel est l'intérêt qu'à date fixe, une fois par année, on honore celle qu'on aime avec les moyens les plus prévisibles qui soient alors que notre douce moitié s'attend inévitablement à recevoir au minimum une boîte de chocolats, un bouquet de fleurs et à passer la soirée au restaurant ? Est-ce que ça ne devrait pas plutôt être le contraire et faire les efforts nécessaires également les autres jours de l'année ? Comme si une journée unique était suffisante pour nous donner bonne conscience. On souhaite tous être différents mais on finit toujours par faire comme les autres. N'existe-t-il pas un moyen pour chaque couple de piger une date au hasard dans le calendrier où chacun réserverait une surprise à l'autre ? Il est grand temps de se réapproprier cette fête pour l'éloigner de son côté commercial.
Très joli travail de HTML5...
Pour la fête, bof en effet. Mais ici à Paris (et sans doute ailleurs) c'est tellement amusant de voir ces gars sur le quai de métro avec un bouquet de fleurs qu'ils ne savent pas comment tenir... pour n'en jamais acheter de l'année sans doute.
Haha, bonne observation :)