Participer au site avec un Tip
Rechercher
 
Bug Suggérer des Améliorations / Corrections
Share Partager sur Facebook Partager sur Twitter
Links Notre chaîne YouTube Notre discord

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

Dessiner une montre dans un Canvas HTML 5

Accès rapide :
Introduction
L'exemple de code

Introduction

Le tag canvas, proposé par le langage HTML depuis sa version 5, permet d'injecter dans une page HTML une zone rectanguaire dans laquelle nous allons pouvoir dessiner, à priori, n'importe quoi. Pour ce faire, une API JavaScript est proposée. Comme le tracé est réalisé par JavaScript, contrairement à une image statique, il est possible de modifier le visuel de la page régulièrement pour proposer des animations plus ou moins sympathiques.

Afin de vous rendre compte de ce qu'il est possible de faire, je vous propose de produire une montre à aiguilles et de l'animer afin de voir défiler les aiguilles. Voici cette montre.

comme les canvas ne sont disponibles que depuis HTML 5, il est important de vérifier que votre navigateur supporte ce tag et l'API JavaScript associée (même s'il est vrai que les navigateurs ne supportant pas les canvas commencent à se faire rares). Cette vérification se fait à deux niveaux : au niveau du tag HTML lui-même, et au niveau du code JavaScript associé. Voici le code permettant de réaliser cette vérification. 
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 

<!DOCTYPE html>
<html>
    <head>
        <title>Vérification du support des Canvas</title>
        <script>
            window.addEventListener( "load", function( event ) {
                canvas = document.getElementById("clockCanvas");
                
                if ( canvas.getContext ) {
                    console.log( "Votre navigateur est opérationnel" );
                } else {
                    console.log( "Pas de canvas pour vous" );
                }
            });
        </script>
    </head>
    <body>
        <canvas id="clockCanvas">
            Votre navigateur ne supporte pas les Canvas HTML5.
            Veuillez en télécharger une version plus récente.
        </canvas>
    </body>
</html>
Vérification du support du canvas par le navigateur

L'exemple de code

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 

<!DOCTYPE html>
<html>

    <head>
        <title>Clock sample</title>
        <style>
            html, body { 
                padding: 0px; 
                margin: 0px; 
                height: 100%;
            };
        </style>
        
        <!-- Je préfère sortir le code JavaScript de la page HTML -->
        <script type="text/javascript" src="clock.js"></script>         
    </head>

    <body style="overflow: hidden">
    
        <!-- Un canvas qui prend tout l'espace disponible dans la fenêtre -->
        <canvas id="clockCanvas" style="width:100%; height: 100%;">
            Votre navigateur ne supporte pas les Canvas HTML5.
            Veuillez en télécharger une version plus récente.
        </canvas>
        
    </body>
    
</html>
Exemple de tracé d'une montre à aiguilles avec un canvas HTML 5 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 
 52 
 53 
 54 
 55 
 56 
 57 
 58 
 59 
 60 
 61 
 62 
 63 
 64 
 65 
 66 
 67 
 68 
 69 
 70 
 71 
 72 
 73 
 74 
 75 
 76 
 77 
 78 
 79 
 80 
 81 
 82 
 83 
 84 
 85 
 86 
 87 
 88 
 89 
 90 
 91 
 92 
 93 
 94 
 95 
 96 
 97 
 98 
 99 
 100 
 101 
 102 
 103 
 104 
 105 
 106 
 107 
 108 
 109 
 110 
 111 
 112 
 113 
 114 
 115 
 116 
 117 
 118 
 119 
 120 
 121 
 122 
 123 
 124 
 125 
 126 
 127 
 128 
 129 
 130 
 131 
 132 
 133 
 134 
 135 
 136 
 137 
 138 
 139 
 140 
 141 
 142 
 143 
 144 
 145 
 146 
 147 
 148 
 149 
 150 
 151 
 152 
 153 
 154 
 155 
 156 
 157 
 158 
 159 
 160 
 161 
 162 
 163 
 164 
 165 
 166 
 167 
 168 
 169 
 170 
 171 
 172 
 173 
 174 
 175 
 176 

var canvas = null;
var context = null;


function draw() {    
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    
    var centerX = width/2;
    var centerY = height/2;
    var radius = 0.9 * ( Math.min( width, height ) / 2 );
    
    
    canvas.width = width;
    canvas.height = height;
    context.clearRect(0, 0, width, height );
    
    // --- Outer disk ---    
    var externalGradient = context.createLinearGradient( 0, centerY-radius, 0, centerY+radius );
    externalGradient.addColorStop( "0","#e0e0e0" );
    externalGradient.addColorStop( "0.5","#6e7774" );
    externalGradient.addColorStop( "0.51","#0a0e0a" );
    externalGradient.addColorStop( "1.0","#0a0809" );
    
    context.strokeStyle = externalGradient;
    context.fillStyle = "#212121";

    context.lineWidth = 8;
    context.beginPath();
    context.arc( centerX, centerY, radius,0, Math.PI*2, true );
    context.closePath();

    context.fill();
    context.stroke();

    // --- Graduations ---
    context.lineWidth = 3;
    context.strokeStyle = "white";
    context.fillStyle = "white";

    context.textAlign="center";
    context.font= (radius/8) + "px Arial";

    var hour = 12
    for( var angle = 0; angle<=360; angle += 6 ) {
        var radianAngle = -(Math.PI/2 - (2 * Math.PI * angle/360));

        if ( angle % 30 != 0 ) {
            context.beginPath();        
            context.moveTo( centerX + Math.cos(radianAngle) * radius * 0.85, 
                            centerY + Math.sin(radianAngle) * radius * 0.85 );
            context.lineTo( centerX + Math.cos(radianAngle) * radius * 0.90, 
                            centerY + Math.sin(radianAngle) * radius * 0.90 );
            context.closePath();
            context.stroke();
        } else {            
            context.beginPath();        
            context.moveTo( centerX + Math.cos(radianAngle-0.01) * radius * 0.80, 
                            centerY + Math.sin(radianAngle-0.01) * radius * 0.80 );
            context.lineTo( centerX + Math.cos(radianAngle-0.02) * radius * 0.90, 
                            centerY + Math.sin(radianAngle-0.02) * radius * 0.90 );
            context.lineTo( centerX + Math.cos(radianAngle+0.02) * radius * 0.90, 
                            centerY + Math.sin(radianAngle+0.02) * radius * 0.90 );
            context.lineTo( centerX + Math.cos(radianAngle+0.01) * radius * 0.80, 
                            centerY + Math.sin(radianAngle+0.01) * radius * 0.80 );
            context.closePath();
            context.fill();    
            context.stroke();

            if ( hour > 0 ) {
                var delta = radius * 0.04;
                context.fillText( hour, centerX + Math.cos(radianAngle) * radius * 0.7, 
                                  centerY + Math.sin(radianAngle) * radius * 0.7 + delta );    
            }
            hour = ++hour % 12;
        }
    }

    // --- Clockwise ---
    var now = new Date();
    context.lineWidth = 3;

    context.strokeStyle = "#FF0000";
    context.fillStyle = "rgba( 255,0,0,0.6 )";

    // --- Hour ---
    var hourAngle = Math.PI * 2 * ((now.getHours() % 12 + now.getMinutes() / 60) / 12);
    hourAngle = -(Math.PI / 2 - hourAngle);

    context.beginPath();
    context.moveTo( centerX + Math.cos( hourAngle ) * radius * 0.6, 
                    centerY + Math.sin( hourAngle ) * radius * 0.6 );
    context.lineTo( centerX + Math.cos( hourAngle-0.4 ) * radius * 0.10, 
                    centerY + Math.sin( hourAngle-0.4 ) * radius * 0.1 );
    context.lineTo( centerX + Math.cos( hourAngle+0.4 ) * radius * 0.10, 
                    centerY + Math.sin( hourAngle+0.4 ) * radius * 0.1 );
    context.lineTo( centerX + Math.cos( hourAngle ) * radius * 0.6, 
                    centerY + Math.sin( hourAngle ) * radius * 0.6 );
    context.closePath();
    
    context.fill();
    context.stroke();

    // --- Minute ---
    var minuteAngle = Math.PI * 2 * (now.getMinutes() / 60 + now.getSeconds() / 3600);
    minuteAngle = -(Math.PI / 2 - minuteAngle);

    context.beginPath();
    context.moveTo( centerX + Math.cos( minuteAngle ) * radius * 0.93, 
                    centerY + Math.sin( minuteAngle ) * radius * 0.93 );
    context.lineTo( centerX + Math.cos( minuteAngle-0.3 ) * radius * 0.10, 
                    centerY + Math.sin( minuteAngle-0.3 ) * radius * 0.1 );
    context.lineTo( centerX + Math.cos( minuteAngle+0.3 ) * radius * 0.10, 
                    centerY + Math.sin( minuteAngle+0.3 ) * radius * 0.1 );
    context.lineTo( centerX + Math.cos( minuteAngle ) * radius * 0.93, 
                    centerY + Math.sin( minuteAngle ) * radius * 0.93 );
    context.closePath();
    
    context.fill();
    context.stroke();

    // --- Second ---
    secondAngle = Math.PI * 2 * (now.getSeconds() / 60);
    secondAngle = -(Math.PI / 2 - secondAngle);

    context.strokeStyle = "rgba( 255,0,0,0.6 )";
    context.beginPath();
    context.moveTo( centerX + Math.cos( secondAngle ) * radius * 0.94, 
                    centerY + Math.sin( secondAngle ) * radius * 0.94 );
    context.lineTo( centerX + Math.cos( secondAngle ) * radius * 0.10, 
                    centerY + Math.sin( secondAngle ) * radius * 0.1 );
    context.closePath();
    
    context.stroke();


    // --- Inner disk ---

    var internalGradientStroke = 
        context.createLinearGradient( 0, centerY-radius*0.18, 0, centerY+radius*0.18 );
    internalGradientStroke.addColorStop( "0","#0a0809" );
    internalGradientStroke.addColorStop( "0.5","#0a0e0a" );
    internalGradientStroke.addColorStop( "0.51","#6e7774" );
    internalGradientStroke.addColorStop( "1.0","#e0e0e0" );

    var internalGradientFill = 
        context.createLinearGradient( 0, centerY-radius*0.15, 0, centerY+radius*0.15 );
    internalGradientFill.addColorStop( "0","#605c5c" );
    internalGradientFill.addColorStop( "1","#111411" );

    context.strokeStyle = internalGradientStroke;
    context.fillStyle = internalGradientFill;
    
    context.lineWidth = 4;
    context.beginPath();
    context.arc( centerX, centerY, radius*0.18, 0, Math.PI*2, true );
    context.closePath();

    context.fill();
    context.stroke();
}


// --- Start the clock and the animation ---
window.addEventListener( "load", function( event ) {

    canvas = document.getElementById("clockCanvas");
    if ( canvas.getContext ) {
        context = canvas.getContext( "2d" );
        context.imageSmoothingEnabled= true;
        
        window.setInterval( draw, 1000 );
        draw();
    }
    
} );
Le code Javascript de notre montre à aiguilles