Retourner à la page d'accueil de TJS

Méthode : CanvasRenderingContext2D.moveTo()

          

Déplace le crayon au point x, y du canvas

Syntaxe
myContext.moveTo(x, y);

Description
Déplace le crayon aux coordonnées (x, y) du canvas.
Le canvas a comme point (0, 0) le coin supérieur gauche.


Exemple Représentation des axes de coordonnées dans le canvas
Code source
<canvas id="myCanvas" style="padding:10px; background-color:#fff;" width="500" height="200">Balise non reconnue</canvas>
<script type="text/javascript">
 var myCanvas=document.getElementById("myCanvas");
 var ctx=myCanvas.getContext("2d");

 /* Crée l'axe X */
 ctx.lineStyle="1";
 ctx.beginPath();
 ctx.moveTo(5,5);
 ctx.lineTo(500,5);
 ctx.lineTo(495,10);
 ctx.moveTo(500,5);
 ctx.lineTo(495,0);
 ctx.closePath();
 ctx.stroke();

 /* Crée l'axe Y */
 ctx.beginPath();
 ctx.moveTo(5,5);
 ctx.lineTo(5,200);
 ctx.lineTo(0,195);
 ctx.moveTo(5,200);
 ctx.lineTo(10,195);
 ctx.closePath();
 ctx.stroke();

 /* Affiche les libellés des axes */
 ctx.font="14px arial";
 ctx.fillText("(x=0, y=0)",9,20);
 ctx.fillText("x",490,25);
 ctx.fillText("y",12,195);
</script>

Résultat
Balise non reconnue
Emulation de la console
Explication
Dessine les axes de coordonnées dans le canvas.
Le point (0,0) est en haut à gauche

Page en rapport
Le tutoriel sur le dessin avec canvas
Page mise à jour le

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 23/11/2017 08:30:53 sur php7 en 28.74 ms