Please enable JavaScript.
Coggle requires JavaScript to display documents.
CANVAS (LIGNE (context.moveTo(x,y); pour pointer sur une point, context…
CANVAS
LIGNE
context.moveTo(x,y); pour pointer sur une point
context.strokeStyle() ou context.fillStyle() pour definir la coleur
context.lineTo() ou on va va dessiner
context.lineTo pour definir la deuxieme point du ligne
context.stroke() pour dessiner
context.beginPath(); pour commencer a dessiner la ligne
context.lineWidth=nombre; pour definir la largeur du ligne
context.lineCaop="round/butt/square"; pour difinir le bordure
context.shadowColor=""; pour difinir l'ombre
QUELQUES PROPRIETEES CANVAS
context.shadowBlur = nombre; pour definir le floutage de l’ombre
context.shadowOffsetX = nombre; décalage en X
context.shadowOffsetY = nombre; décalage en Y
on peut aussi dessiner des formes personnalisées par :
context.beginPath();
et ici on peut utiliser plusieurs methodes comme ( lineTo(), arcTo(), quadraticCurveTo(), ou bezierCurveTo() ... )
context.closePath();
context.shadowcolor="color"; definir la coleur de l'ombre
canvas.addEventListener('mousemove/onmouseup/onmousedown/onkeyup/onkeydown', function(){},true/false); pour detecter une evenement dans le canvas
context.textAlign=[start/end/left/center/right]; pour aligne une text par rappor au valeur donner
TEXTURE
var imageObj = new Image(); definir le var image
imageObj.onload = function(){ }; executer le code de la fonction au chargement de l'image
var pattern = context.createPattern(imageObj, "repeat/repeat-x/repeat-y/no-repeat");
context.rect(10, 10, canvas.width - 20, canvas.height - 20);
context.fillStyle = pattern;
context.fill();
imageObj.src = "image.png"; definir la source de l'image
IMAGE
var imageObj = new Image(); definir l'image dans une variable
imageObj.onload = function(){ }; executer la fonction au chargement de l'image
context.drawImage(imageObj, x, y); desinner l'image avec la conservation du taille d'image
imageObj.src = "image.jpg"; definir la source de l'image
quelque indication :
context.drawImage(image, x, y); desinner l'image avec la conservation du taille d'image
context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); permet de ne dessiner qu’une partie de l’image source dans le canvas
context.drawImage(img, x, y, tailleX, tailleY) ; dessiner l'mage avec la taille XetY
L'IMAGE D'UNE VIDEO
context.drawImage(video, x, y, Width, Height); avec x et y sont les coordonnées du point gouche en haut du video
RECTANGLE
Rectangle pleine
fillRect(x,y,width,height);
x et y represente les cordonnées du point gouche en haut
width : largeur du rectangle
height represente la longeur
rectangle non pleine
strokeRect(x,y,width,height);
Effacer une Rectangle
clearRect(x,y,width,height);
CERCLE
context.beginPath(); pour commencer le dissin
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
context.stroke();
RECURATION
dans javascript
var nom_du_variable=document.getElementById("id");
contexte graphique du canvas pour dessiner
var context=nom_du_variable.getContext("2d");
COURBE
Courbe quadrique
context.moveTo(startX, startY);
context.quadraticCurveTo(controlX, controlY, endX, endY);
Courbe de Bezier
context.moveTo(startX, startY); point de depart
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
GRANDIENT
linear
var mon_gradient = context.createLinearGradient(x1, y1, x2, y2); x1 et y1 le coordonnées du point de depart et x2 et y2 les coordonées du point d'arriver
mon_gradient.addColorStop(position, "color"); avec position est la position ou le color est arreter et color representer la coleur
context.fillStyle = mon_gradient;
radial
var mon_gradient = context.createRadialGradient(X1, Y1, r1, X2 ,Y2 r2); x1 et y1 le coordonnées du cercle de depart et x2 et y2 les coordonées du cercle d'arriver et r1 et r2 representent les rayons des deux cercle de depart et d'arrever
mon_gradient.addColorStop(position, "color"); avec position est la position ou le color est arreter et color representer la coleur
context.fillStyle = mon_gradient;
TEXT
pleine
context.font = "40pt Calibri"; pour definir le font
context.fillText("text", x, y); pour ecrire une texte pleine
non pleine
context.fillText("text", x, y); pour ecrire une texte non pleine
context.font = "40pt Calibri"; pour definir le font
DECLARATION DANS HTML
<canvas id="id" width="300" height="300"></canvas>
RESET CANVAS
nom_variable.width=nom_variable.width;