skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mercredi 25 janvier 2012

Dessiner un coeur avec le canvas HTML5 et passer pour un grand sentimental

Publié par Infinite Loop, à 08: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');
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();
Résultat :

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


Tags: HTML, JavaScript

2 réponses à "Dessiner un coeur avec le canvas HTML5 et passer pour un grand sentimental"

  1. Anonyme a dit…
    13 février 2012 01:14

    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.

    Infinite Loop a dit…
    13 février 2012 06:51

    Haha, bonne observation :)


Enregistrer un commentaire

Message plus récent Message plus ancien Accueil
Inscription à : Publier les commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (149)
    • Club Vidéo (21)
    • Coffre à outils (59)
    • CSS (8)
    • Curiosités (98)
    • Easter Eggs (23)
    • Extensions Firefox (20)
    • Histoire (14)
    • HTML (29)
    • Humour (53)
    • Intégration (34)
    • iPod (12)
    • JavaScript (107)
    • Jeu de combat (6)
    • Le coin du geek (94)
    • Liens (12)
    • Linux (56)
    • Livres (60)
    • Lois et principes (34)
    • Marché des saveurs (24)
    • Mathématique (17)
    • Montréal (18)
    • Musique (79)
    • Pancartes et écriteaux (14)
    • Perl (8)
    • PHP (126)
    • PostgreSQL (43)
    • Programmation (93)
    • Saviez-vous que (49)
    • SEO (5)
    • SQL Server (22)
    • Sécurité (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Zend Framework (26)

    Divers


    Archives

    • ▼  2012 (34)
      • ►  mars 2012 (6)
        • Citation no. 147 sur le choix d'une guitare
        • Dexter, le tueur qui connaît le HTML
        • Introduction aux CTE de Postgres
        • Mon frigo est plus cool que le vôtre
        • La semaine de travail de 7 jours comme solution
        • 10 constatations du Confoo Montréal 2012
      • ►  février 2012 (15)
        • Un dernier souffle pour mon iPod Touch
        • Zend_Date me fait perdre mon temps avec l'heure d'...
        • Aucun ingrédient imprononçable
        • L'affaire est ketchup
        • Citation no. 146 sur le guitariste
        • Personnage le plus vulgaire de tous les temps
        • Le piège des design patterns
        • Convertir une image couleur à grayscale avec le ca...
        • Mettre sa vie sur pause pendant un moment
        • Quoi faire quand le VPN nous déconnecte après 3 mi...
        • Effet miroir sur une image avec le canvas HTML5
        • Ces imbéciles qui veulent voir la vie en 3D
        • Citation no. 145 sur les langages de programmation...
        • Créer un fichier image à partir du dataURL avec PH...
        • Enregistrement du contenu d'un canvas HTML5
      • ▼  janvier 2012 (13)
        • Dans quel pays se cache André ?
        • Emblème de Montréal en canvas HTML5
        • Dessiner un coeur avec le canvas HTML5 et passer p...
        • Citation no. 144 sur les hommes politiques
        • Dessiner une spirale dans un canvas HTML5
        • L'arnaque des primes MTY dans les restaurants
        • Ahuntsic, d'hier à aujourd'hui
        • C'est urgent parce que ça ne l'est pas
        • Que contient le CV de Dieu ?
        • Logo de Radio-Canada en canvas HTML5
        • Canvas 2D HTML5 en 10 étapes faciles
        • Coup de coeur musical
        • Citation no. 143 sur le chien et le chat
    • ►  2011 (146)
      • ►  décembre 2011 (14)
        • Les bonnes parties de PHP, vraiment ?
        • Combien pèse le cerveau d'un imbécile ?
        • Les vrais programmeurs ninjas codent avec un verre...
        • Quand Google hurle, il faut être à l'affût
        • 32 gigaoctets de Coke = 4 Go diète
        • Faire pousser des légumes en hiver
        • Citation no. 142 sur la superstition
        • Vegemite, la mort noire
        • Cinéma-Twit et Parodies sur Terre
        • Preuve de concept : 1 guitare, 8 manches
        • L'humour du programmeur et son icône monstrueux
        • Citation no. 141 sur la merde
        • Retour vers le passé et voyage dans le temps avec ...
        • Fonction PHP pour formater l'heure
      • ►  novembre 2011 (11)
        • Le plaisir insoupçonné de manger du Velveeta
        • Choisir le bon symbole
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (431)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (40)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Membres

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft