Please enable JavaScript.
Coggle requires JavaScript to display documents.
Les Canvas (suite comment utliliser(JavaScript):cree une ligne (var c =…
Les Canvas
suite comment utliliser(JavaScript):cree une ligne
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
le canvas que on va cree est en 2d
ctx.moveTo(0, 0);indique le chemin sans cree une "ligne"
ctx.lineTo(200, 100);indique que on va cree une ligne (x,y)
position selon l axe des x et des y (2d)
ctx.stroke(); cree l object
suite comment utiliser(JavaScript)cree un cercle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.arc(95, 50, 40, 0, 2 * Math.PI);cree un arque (x,y,largeur,hauteur,rayon)
ctx.stroke()
suite comment utiliser(JavaScript):les textes
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";la taille et le style du texte
ctx.strokeText("Hello World", 10, 50);(le texte a inserer,x,y)
suite comment utiliser(JavaScript) cree une forme(rectangle)
context.fillStyle = "green"; la couleur de font du rectangle
context.fillRect(0, 0, 50, 80);//(x,y,largeur,hauteur
context.strokeStyle = "yellow"; //couleur de la bordure du rectangle
context.lineWidth = "10"; //largeur de la bordure
context.strokeRect(0, 0, 50, 80);//position de la bordure
Introduction: L'élément CANVAS est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts.
comment utiliser(HTML):
<canvas> se résume en une zone de dessin dont la hauteur et la largeur sont définies dans du code HTML comme suit:
<canvas id="myCanvas" width="200" height="100"></canvas>
le "ID" sera referer dans le javascript.