Please enable JavaScript.

Coggle requires JavaScript to display documents.

canvas :<3: (Interaction avec ses éléments :check: (Contrôle avec la…

- - - - canvas.onmousedown=handleMouseDown ;
      - canvas.onmousemove =handleMouseMove ;
      - canvas.onmouseup=handleMouseUp ;
      - canvas.onmouseout=handleMouseOut ;
  - - - canvas.onkeydown =hanleKeyDown ;
      - canvas.onkeyup=handleKeyUp;
      - canvas.onkeypress=handleonKeyPress
      - e.keyCode :red_cross: connaître le code de key
- - - - Mises à jour programmées (Scheduled updates
        :fire:
        
        setInterval(function, delay)
        
        setTimeout(function, delay)
        
        requestAnimationFrame(callback)
        
        window.requestAnimationFrame()
        
        addEventLisener
- - - - Récupérer dans une variable cet élément, dans du code javascript
      - var canvas = document.getElementById("my-canvas");
      - Récupérer le contexte graphique du canvas pour dessiner
      - var ctx = canvas.getContext("2d");
      - Dessiner à l’aide du contexte graphique
        
        ctx. :pen:
        
        fillRect(x, y, largeur, hauteur)
        
        strokeRect(x,y,largeur,hauteur)
        
        beginPath()
        closePath()
        moveTo(x,y)
        lineTo(x,y)
        
        beginPath()
        arc(x, y,rayon, angleDepart, angleFin,
        sensInverse)
        strocke()
        closePath()
        
        :warning: l'importance de l'ordre
        
        Méthode différente pour afficher un rectangle .fill(), stroke() :star:
        
        Le design des traits lineCap = "round / butt / quare"; .lineJoin="bevel / round / miter ";
        
        fillText("texte", posX, posY); strokeText("texte", posX, posY)
      - Peux etre stylé par :star:
        
        image cropping,
        
        image resizing,
        
        text may be stroked, filled or both stroked & filled,
        
        text alignment,
        
        font size,
        
        font face,
        
        linear gradients and radial gradients,
        
        shadowing,
        
        opacity,
        
        shape fill color,
        
        stroke color,
        
        stroke width,
        
        compositing