Scribd Logo
Upload

Welcome to Scribd!

  • Canvas

    Uploaded by

    Matthieu Barbaresco
    22 views8 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views8 pages

    Canvas

    Uploaded by

    Matthieu Barbaresco

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    108

    Chapitre 7 Canvas
    7.1 Introduction

    <canvas> est un lment HTML qui peut tre utilis pour produire des lments graphiques sur une page web, en utilisant javascript. Par exemple, il peut tre utilis pour dessiner des graphiques, faire des compositions de photos ou encore faire des animations. La balise <canvas> est donc  un moyen de crez des dessins sur une page web  une balise, crire dans le corps (<body>) d'une page

    7.2

    Les attributs de <canvas>

    La balise <canvas> prend gnralement les attributs suivants :  id : un identiant qui nous permettra, par la suite, d'accder la balise pour y produire le dessin  width : la largeur de la surface de dessin  height : la hauteur de la surface de dessin Nous avons donc la syntaxe suivante : <canvas id='...' width='...' height='...'></canvas>
    7.3
    7.3.1

    Intitialiser <canvas>
    document.getElementById(...)

    La cration d'un dessin se fait l'aide d'instructions javascript, crites dans la partie head d'une page HTML. A l'aide de document.getElementById(...) 109

    110

    CHAPITRE 7.

    CANV AS

    nous pouvons accder au canvas. Voici donc les premires tapes pour produire un dessin sur une page l'aide de <canvas> :
    <html <head> <script> document.getElementById('monCanvas') </script> </head> <body> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>

    7.3.2

    getContext('2d')

    La fonction getContext('2d') permet d'obtenir une variable, que nous allons appeler ctx (abrviation pour contexte). Ce contexte contient les fonctions de canvas moveTo(...), lineTo(...), etc...
    <html <head> <script> var ctx document.getElementById('monCanvas').getContext('2d') </script> </head> <body> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>

    7.3.3

    Fonction d'initialisation

    Il est plus judicieux de mettre les instructions ci-dessus dans une fonction, que nous appellerons initialiser() et qui sera appele au chargement de la page <body onload='initialiser()'>

    7.3.

    INTITIALISER <CANV AS>

    111

    <html <head> <script> var ctx

    function initialiser(){

    document.getElementById('monCanvas').getContext('2d')

    </script> </head> <body onload='initialiser()'> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>

    7.3.4

    Fonction de dessin

    L'objet ctx contient les mthodes pour crer des dessins, comme moveTo(...), lineTo(...), etc... Dans une fonction (nomme dessiner() ci-dessous), nous pouvons crire les instructions de dessin (qui, en l'occurence dessinent un triangle rectangle).
    <html <head> <script> var ctx

    function initialiser(){
    }

    document.getElementById('monCanvas').getContext('2d')

    function dessiner(){

    ctx.moveTo(100,100) ctx.lineTo(100,50) ctx.lineTo(50,100) ctx.lineTo(100,100)

    } </script> </head> <body onload='initialiser();dessiner()'> <canvas id='monCanvas' width='200px' height='200px'> </canvas>

    112
    <body> </html>

    CHAPITRE 7.

    CANV AS

    7.3.5

    Notion de chemin

    Pour que le dessin s'ache, il est ncessaire de dnir un chemin (path), l'aide de beginPath(). Une fois le chemin cr, on utilise stroke() le contour du chemin, ou ll() pour remplir la forme.
    <html <head> <script> var ctx

    function initialiser(){
    }

    document.getElementById('monCanvas').getContext('2d')

    function dessiner(){

    ctx.beginPath() ctx.moveTo(100,100) ctx.lineTo(100,50) ctx.lineTo(50,100) ctx.lineTo(100,100) ctx.stroke()

    </script> </head> <body onload='initialiser();dessiner()'> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>

    7.4.

    RSUM SUR L'INITIALISATION DE <CANV AS>

    113

    7.3.6

    Rsultat

    En excutant les instructions de la section prcdente, nous obtenons la gure ci-contre


    7.4 Rsum sur l'initialisation

    de <canvas>

    Sur la gure 7.4, nous prsentons encore une fois, sous une forme rsume, les instructions d'initialisation de <canvas> :
    A : La balise <canvas>

    Figure 7.1  Rsultat


    <canvas>

    Mettre, dans le corps de la page, une balise <canvas> avec les attributs suivants :  l'identiant (id) donne un nom l'lment, ce qui permet d'y accder  la largeur (width)  la hauteur (height)
    B : La fonction qui initialise la surface de dessin

    Dans un script, crit dans la partie head du document HTML un fonction permet d'initialiser la surface de dessin. Voir partie B de la gure 7.4
    C : L'appel de la fonction d'initialisation

    A l'aide d'un vnement, appler la fonction d'initialisation. Voir partie C de la gure 7.4
    7.5 Les images

    <canvas> nous donne la possibilit de dessiner des images. Ceci peut par exemple tre utilis pour faire un album de photos, mettre un arrire-plan un graphique, etc... L'importation d'une image dans canvas est compose de 2 tapes : 1. la cration de l'image (dont on connait l'url) 2. le dessin de l'image dans canvas

    114

    CHAPITRE 7.

    CANV AS

    Figure 7.2  Rsum de l'initialisation de <canvas>


    7.5.1 Cration d'une image

    Une faon de crer une image est d'en faire un nouvel objet, puis de faire correspondre son attribut source (src) l'url de l'image que nous voulons acher : img.src = 'myImage.png' ;
    7.5.2

    var img = new Image() ; // Cration de l'objet 'image'


    // Faire correspondre sa source l'adresse d'une image.

    Dessin d'une image dans <canvas>

    Une fois l'image cre, la fonction

    drawImage(image,x,y)
    permet de dessiner l'image dans le canvas, en plaant le coin suprieur gauche de l'image aux coordonnes (x,y).
    7.6
    7.6.1

    Transformations gomtriques
    Introduction

    Canvas ore des mthodes permettant d'appliquer des changements au rfrentiel (le systme d'axes) pour eectuer

    7.6.

    TRANSFORMATIONS GOMTRIQUES

    115

     des changements d'chelle  des rotations  des translations


    7.6.2 Changement d'chelle : scale(x,y)

    La fonction scale(x,y permet de changer l'chelle (i.e faire un zoom ). correspond au changement d'chelle suivant l'axe horizontal, tandis que y correspond au changement d'chelle suivant l'axe vertical. Les 2 paramtres doivent tre des nombres entiers ; les nombres infrieurs 1 correspondent un rtrcissement, tandis que les nombres suprieurs 1 correspondent un aggrandissement.
    x

    7.6.3

    Translation : translate(dx,dy)

    La fonction translate(dx,dy) permet de dplacer le rfrentiel du canvas d'une distance horizontale dx et d'une distance verticale dy. Il est important de noter que, la dirence de SVG, c'est le rfrentiel, et non les objets qui se dplacent.
    7.6.4 Rotation : rotate(angle)

    La mthode rotate(angle) permet de tourner le rfrentiel, autour de l'origine. Un angle positif correspond une rotation dans le sens des aiguilles d'une montre. Pour faire une rotation autour d'un autre point, on fera d'abord une translation ( l'aide de la mthode translate(dx,dy) ), puis la rotation.

    You might also like