Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Vos résultats de recherche

    CanvasRenderingContext2D.lineTo()

    Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

    La méthode CanvasRenderingContext2D.lineTo() de l'API 2D des Canvas connecte le point aux coordonnées actuelles du crayon à celles reçues en argument en une ligne droite.

    Syntaxe

    void ctx.lineTo(x, y);

    Paramètres

    x
    L'abcisse x du point d'arrivée.
    y
    L'ordonnée y du point d'arrivée.

    Exemples

    Utilisation de la méthode lineTo

    Ceci est un extrait e code utilisant la méthode lineTo. Il faut utiliser la méthode beginPath() pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode moveTo() et utiliser la méthode stroke() pour rendre la ligne visible.

    HTML

    <canvas id="canvas"></canvas>

    JavaScript

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

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

    Éditez le code suivant pour voir les changements en direct:

    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100, 100);
ctx.stroke();</textarea>

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

    Spécifications

    Spécification Status Comment
    WHATWG HTML Living Standard
    La définition de 'CanvasRenderingContext2D.lineTo' dans cette spécification.    		 Standard évolutif  

    Compatibilité des navigateurs

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Oui) (Oui) (Oui) (Oui) (Oui)
    Feature Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)

    Voir aussi

    Étiquettes et contributeurs liés au document

    Étiquettes : 
     Contributeurs à cette page : JNa0
     Dernière mise à jour par : JNa0,