html5-canvas
Chemin (syntaxe uniquement)

Syntaxe

• context.beginPath ()
• context.moveTo (startX, startY)
• context.lineTo (endX, endY)
• context.arc (centerX, centerY, rayon, startRadianAngle, endingRadianAngle)
• context.quadraticCurveTo (controlX, controlY, endX, endY)
• context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, endX, endY)
• context.arcTo (pointX1, pointY1, pointX2, pointY2, rayon)
• context.rect (leftX, topY, width, height);
• context.closePath ()

Vue d'ensemble des commandes de dessin du chemin de base: lignes et courbes

==================

TODO: Liez chacune des commandes de dessin ci-dessous à leurs exemples individuels. Je ne sais pas comment faire car les liens vers les exemples individuels pointent vers le dossier "draft".

TODO: Ajouter des exemples pour ces commandes "action" du chemin: stroke (), fill (), clip ()

==================

Chemin

Un chemin définit un ensemble de lignes et de courbes pouvant être visiblement dessinées sur le canevas.

Un chemin n'est pas automatiquement dessiné sur le canevas. Mais les lignes et les courbes du chemin peuvent être dessinées sur le canevas en utilisant un trait stylé. Et la forme créée par les lignes et les courbes peut également être remplie avec un remplissage stylé.

Les chemins ont des utilisations qui vont au-delà du dessin sur le canevas:

• Hit test si une coordonnée x, y est à l'intérieur de la forme du chemin.
• Définition d'une zone de découpage dans laquelle seuls les dessins à l'intérieur de la zone de découpage seront visibles. Tous les dessins en dehors de la zone de découpage ne seront pas dessinés (== transparent), ce qui est similaire au dépassement CSS.

Les commandes de dessin de chemin de base sont les suivantes:

• beginpath
• déménager à
• lineTo
• arc
• quadraticCurveTo
• bezierCurveTo
• arcTo
• rect
• prèsPath

Description des commandes de dessin de base:

beginPath

context.beginPath()

Commence à assembler un nouvel ensemble de commandes de chemin et supprime également tout chemin précédemment assemblé.

Le rejet est un point important et souvent négligé. Si vous ne commencez pas un nouveau chemin, toutes les commandes de chemin émises précédemment seront automatiquement redessinées.

Il déplace également le dessin "stylo" vers l'origine supérieure gauche du canevas (coordonnée == [0,0]).

déménager à

context.moveTo(startX, startY)

Déplace l'emplacement actuel du stylet sur la coordonnée [startX, startY].

Par défaut, tous les dessins de chemin sont connectés ensemble. Ainsi, le point d'arrivée d'une ligne ou d'une courbe est le point de départ de la ligne ou de la courbe suivante. Cela peut entraîner une ligne inattendue entre deux dessins adjacents. La context.moveTo commande essentiellement « prend le stylo dessin » et place à une nouvelle coordonnée de sorte que la ligne automatique de connexion ne soit pas établi.

lineTo

context.lineTo(endX, endY)

Dessine un segment de ligne à partir de l'emplacement actuel du stylet pour coordonner [endX, endY]

Vous pouvez assembler plusieurs commandes .lineTo pour dessiner une polyligne. Par exemple, vous pouvez assembler 3 segments de ligne pour former un triangle.

arc

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

Dessine un arc de cercle selon un point central, un rayon et des angles de départ et de fin. Les angles sont exprimés en radians. Pour convertir des degrés en radians, vous pouvez utiliser cette formule: radians = degrees * Math.PI / 180; .

L'angle 0 fait face directement au centre de l'arc. Pour dessiner un cercle complet, vous pouvez faire terminerAngle = startAngle + 360 degrés (360 degrés == Math.PI 2): `context.arc (10,10,20,0, Math.PI 2);

Par défaut, l'arc est dessiné dans le sens des aiguilles d'une montre. Un paramètre optionnel [true | false] indique à l'arc d'être dessiné dans le sens inverse des aiguilles d'une montre: context.arc(10,10,20,0,Math.PI*2,true)

quadraticCurveTo

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

Dessine une courbe quadratique commençant à l'emplacement actuel du stylet jusqu'à une coordonnée de fin donnée. Une autre coordonnée de contrôle donnée détermine la forme (courbure) de la courbe.

bezierCurveTo

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

Dessine une courbe de Bézier cubique commençant à l'emplacement actuel du stylet jusqu'à une coordonnée de fin donnée. Deux autres coordonnées de contrôle données déterminent la forme (courbure) de la courbe.

arcTo

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

Dessine un arc de cercle avec un rayon donné. L'arc est dessiné dans le sens des aiguilles d'une montre à l'intérieur du coin formé par l'emplacement actuel du stylo et reçoit deux points: Point1 & Point2.

Une ligne reliant l'emplacement actuel du stylet et le début de l'arc est automatiquement dessinée avant l'arc.

rect

context.rect(leftX, topY, width, height)

Dessine un rectangle à partir d'un coin supérieur gauche et d'une largeur et hauteur.

context.rect est une commande de dessin unique car elle ajoute des rectangles déconnectés. Ces rectangles déconnectés ne sont pas automatiquement connectés par des lignes.

prèsPath

context.closePath()

Dessine une ligne entre l'emplacement actuel du stylet et la coordonnée du chemin de début.

Par exemple, si vous tracez 2 lignes formant 2 branches d'un triangle, closePath "fermera" le triangle en dessinant la troisième branche du triangle du point d'extrémité de la 2ème jambe au point de départ de la première jambe.

Le nom de cette commande est souvent mal compris. context.closePath N'EST PAS un délimiteur de fin pour context.beginPath . Encore une fois, la commande closePath dessine une ligne - elle ne "ferme" pas un beginPath .

lineTo (une commande de chemin)

context.lineTo(endX, endY)

Dessine un segment de ligne à partir de l'emplacement actuel du stylet pour coordonner [endX, endY]

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=20;
    var endX=125;
    var endY=20;

    // Draw a single line segment drawn using "moveTo" and "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Vous pouvez assembler plusieurs commandes .lineTo pour dessiner une polyligne. Par exemple, vous pouvez assembler 3 segments de ligne pour former un triangle.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=20;
    var rightVertexX=75;
    var rightVertexY=70;
    var leftVertexX=25;
    var leftVertexY=70;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);
    ctx.lineTo(topVertexX,topVertexY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

arc (une commande de chemin)

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

Dessine un arc de cercle selon un point central, un rayon et des angles de départ et de fin. Les angles sont exprimés en radians. Pour convertir des degrés en radians, vous pouvez utiliser cette formule: radians = degrees * Math.PI / 180; .

L'angle 0 fait face directement au centre de l'arc.

Par défaut, l'arc est dessiné dans le sens des aiguilles d'une montre. Un paramètre optionnel [true | false] indique à l'arc d'être dessiné dans le sens inverse des aiguilles d'une montre: context.arc(10,10,20,0,Math.PI*2,true)

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=Math.PI*2*;  // start at 90 degrees == centerY+radius
    var endingRadianAngle=Math.PI*2*.75;  // end at 270 degrees (==PI*2*.75 in radians)

    // A partial circle (i.e. arc) drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Pour dessiner un cercle complet, vous pouvez utiliser la méthode terminerAngle = startingAngle + 360 degrés (360 degrés == Math.PI2).

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=0;       // start at 0 degrees
    var endingRadianAngle=Math.PI*2; // end at 360 degrees (==PI*2 in radians)

    // A complete circle drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

quadraticCurveTo (une commande de chemin)

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

Dessine une courbe quadratique commençant à l'emplacement actuel du stylet jusqu'à une coordonnée de fin donnée. Une autre coordonnée de contrôle donnée détermine la forme (courbure) de la courbe.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=70;
    var controlX=75;
    var controlY=25;
    var endX=125;
    var endY=70;

    // A quadratic curve drawn using "moveTo" and "quadraticCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.quadraticCurveTo(controlX,controlY,endX,endY);
    ctx.stroke();


}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

bezierCurveTo (une commande de chemin)

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

Dessine une courbe de Bézier cubique commençant à l'emplacement actuel du stylet jusqu'à une coordonnée de fin donnée. Deux autres coordonnées de contrôle données déterminent la forme (courbure) de la courbe.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=50;
    var controlX1=75;
    var controlY1=10;
    var controlX2=75;
    var controlY2=90;
    var endX=125;
    var endY=50;      
    
    // A cubic bezier curve drawn using "moveTo" and "bezierCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

arcTo (une commande de chemin)

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

Dessine un arc de cercle avec un rayon donné. L'arc est dessiné dans le sens des aiguilles d'une montre à l'intérieur du coin formé par l'emplacement actuel du stylo et reçoit deux points: Point1 & Point2.

Une ligne reliant l'emplacement actuel du stylet et le début de l'arc est automatiquement dessinée avant l'arc.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var pointX0=25;
    var pointY0=80;
    var pointX1=75;
    var pointY1=0;
    var pointX2=125;
    var pointY2=80;
    var radius=25;

    // A circular arc drawn using the "arcTo" command. The line is automatically drawn.
    ctx.beginPath();
    ctx.moveTo(pointX0,pointY0);
    ctx.arcTo(pointX1, pointY1, pointX2, pointY2, radius);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

rect (une commande de chemin)

context.rect(leftX, topY, width, height)

Dessine un rectangle à partir d'un coin supérieur gauche et d'une largeur et hauteur.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // A rectangle drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

context.rect est une commande de dessin unique car elle ajoute des rectangles déconnectés.

Ces rectangles déconnectés ne sont pas automatiquement connectés par des lignes.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // Multiple rectangles drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.rect(leftX+50, topY+20, width, height);
    ctx.rect(leftX+100, topY+40, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

closePath (une commande de chemin)

context.closePath()

Dessine une ligne entre l'emplacement actuel du stylet et la coordonnée du chemin de début.

Par exemple, si vous tracez 2 lignes formant 2 branches d'un triangle, closePath "fermera" le triangle en dessinant la troisième branche du triangle du point d'extrémité de la 2ème jambe au point de départ de la première jambe.

Une idée fausse expliquée!

Le nom de cette commande est souvent mal compris.

context.closePath N'EST PAS un délimiteur de fin pour context.beginPath .

Encore une fois, la commande closePath dessine une ligne - elle ne "ferme" pas un beginPath.

Cet exemple dessine 2 jambes d'un triangle et utilise closePath pour compléter (fermer ?!) le triangle en dessinant la troisième jambe. closePath fait, closePath trace une ligne entre le point d'extrémité de la deuxième étape et le point de départ de la première étape.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=50;
    var rightVertexX=75;
    var rightVertexY=75;
    var leftVertexX=25;
    var leftVertexY=75;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);

    // closePath draws the 3rd leg of the triangle
    ctx.closePath()

    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

beginPath (une commande de chemin)

context.beginPath()

Commence à assembler un nouvel ensemble de commandes de chemin et supprime également tout chemin précédemment assemblé.

Il déplace également le dessin "stylo" vers l'origine supérieure gauche du canevas (coordonnée == [0,0]).

Bien que facultatif, vous devriez TOUJOURS démarrer un chemin avec beginPath

Le rejet est un point important et souvent négligé. Si vous ne commencez pas un nouveau chemin avec beginPath , toutes les commandes de chemin émises précédemment seront automatiquement redessinées.

Ces deux démos tentent toutes deux de dessiner un "X" avec un trait rouge et un trait bleu.

Cette première démo utilise correctement beginPath pour lancer son deuxième trait rouge. Le résultat est que le "X" a correctement un trait rouge et un trait bleu.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    ctx.beginPath();        // Important to begin a new path! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Cette deuxième démo laisse incorrectement beginPath sur le deuxième coup. Le résultat est que le "X" a incorrectement les deux traits rouges.

Le deuxième stroke() dessine le deuxième trait rouge.

Mais sans un second beginPath , ce même deuxième stroke() redessine aussi incorrectement le premier trait.

Comme le second stroke() est maintenant rouge, le premier trait bleu est remplacé par un trait rouge incorrectement coloré.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    // Note: The necessary 'beginPath' is missing! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

lineCap (attribut de style de chemin)

context.lineCap=capStyle  // butt (default), round, square

Définit le style de majuscule des points de départ de ligne et des points de fin.

• butt , le style lineCap par défaut, affiche les majuscules au carré qui ne dépassent pas les points de début et de fin de la ligne.

• rond , montre des calottes arrondies qui dépassent les points de départ et d'arrivée de la ligne.

• square , montre des calques carrés qui dépassent les points de départ et d'arrivée de la ligne.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineCap default: butt
    ctx.lineCap='butt';  
    drawLine(50,40,200,40);

    // lineCap: round
    ctx.lineCap='round';  
    drawLine(50,70,200,70);

    // lineCap: square
    ctx.lineCap='square';  
    drawLine(50,100,200,100);

    // utility function to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

    // For demo only,
    // Rulers to show which lineCaps extend beyond endpoints
    ctx.lineWidth=1;
    ctx.strokeStyle='red';
    drawLine(50,20,50,120);
    drawLine(200,20,200,120);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

lineJoin (attribut de style de chemin)

context.lineJoin=joinStyle  // miter (default), round, bevel

Définit le style utilisé pour connecter les segments de ligne adjacents.

• mitre , la valeur par défaut, joint les segments de ligne avec une jointure pointue.
• rond , joint des segments de ligne avec un joint arrondi.
• biseau , rejoint les segments de ligne avec un joint émoussé.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineJoin: miter (default)
    ctx.lineJoin='miter';
    drawPolyline(50,30);

    // lineJoin: round
    ctx.lineJoin='round';
    drawPolyline(50,80);

    // lineJoin: bevel
    ctx.lineJoin='bevel';
    drawPolyline(50,130);

    // utility to draw polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

strokeStyle (attribut de style de chemin)

context.strokeStyle=color

Définit la couleur qui sera utilisée pour tracer le contour du chemin actuel.

Ce sont color options de color (celles-ci doivent être citées):

• Une couleur nommée CSS , par exemple context.strokeStyle='red'

• Une couleur hexadécimale , par exemple context.strokeStyle='#FF0000'

• Une couleur RVB , par exemple context.strokeStyle='rgb(red,green,blue)' où rouge, vert et bleu sont des nombres entiers compris entre 0 et 255 indiquant la force de chaque couleur de composant.

• Une couleur HSL , par exemple context.strokeStyle='hsl(hue,saturation,lightness)' où la teinte est un entier compris entre 0 et 360 sur la roue chromatique et où saturation et luminosité sont des pourcentages (0-100%) indiquant la force de chaque composant .

• Une couleur HSLA , par exemple context.strokeStyle='hsl(hue,saturation,lightness,alpha)' où la teinte est un entier compris entre 0 et 360 sur la roue chromatique et où la saturation et la luminosité sont des pourcentages (0-100%) indiquant la force de chaque composant et alpha est une valeur décimale de 0,00-1,00 indiquant l'opacité.

Vous pouvez également spécifier ces options de couleur (ces options sont des objets créés par le contexte):

• Un dégradé linéaire qui est un objet de dégradé linéaire créé avec context.createLinearGradient

• Un dégradé radial qui est un objet de dégradé radial créé avec context.createRadialGradient

• Un modèle qui est un objet de modèle créé avec context.createPattern

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.strokeStyle='red';
    drawLine(50,40,250,40);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(75,75,175,75);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    drawLine(50,75,250,75);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,110,15,100,110,45);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    ctx.lineWidth=20;
    drawLine(50,110,250,110);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.strokeStyle=pattern;
        drawLine(50,150,250,150);
    }
    patternImage.src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png';

    // for demo only, draw labels by each stroke
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',265,40);
    ctx.fillText('Linear Gradient color',265,75);
    ctx.fillText('Radial Gradient color',265,110);
    ctx.fillText('Pattern color',265,150);

    // utility to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=425 height=200></canvas>
</body>
</html>

fillStyle (attribut de style de chemin)

context.fillStyle=color

Définit la couleur qui sera utilisée pour remplir l'intérieur du chemin actuel.

Ce sont des options de couleur (celles-ci doivent être citées):

• Une couleur nommée CSS , par exemple context.fillStyle='red'

• Une couleur hexadécimale , par exemple context.fillStyle='#FF0000'

• Une couleur RVB , par exemple context.fillStyle='rgb(red,green,blue)' où rouge, vert et bleu sont des nombres entiers compris entre 0 et 255 indiquant la force de la couleur de chaque composant.

• Une couleur HSL , par exemple context.fillStyle='hsl(hue,saturation,lightness)' où la teinte est un entier compris entre 0 et 360 sur la roue chromatique et où la saturation et la luminosité sont des pourcentages (0-100%) indiquant la force de chaque composant .

• Une couleur HSLA , par exemple context.fillStyle='hsl(hue,saturation,lightness,alpha)' où la teinte est un entier compris entre 0 et 360 sur la roue chromatique et où la saturation et la luminosité sont des pourcentages (0-100%) indiquant la force de chaque composant et alpha est une valeur décimale de 0,00-1,00 indiquant l'opacité.

Vous pouvez également spécifier ces options de couleur (ces options sont des objets créés par le contexte):

• Un dégradé linéaire qui est un objet de dégradé linéaire créé avec context.createLinearGradient

• Un dégradé radial qui est un objet de dégradé radial créé avec context.createRadialGradient

• Un modèle qui est un objet de modèle créé avec context.createPattern

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.fillStyle='red';
    ctx.fillRect(50,50,100,50);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(225,50,300,50);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(200,50,100,50);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,175,5,100,175,30);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(50,150,100,50);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.fillStyle=pattern;
        ctx.fillRect(200,150,100,50);
    }
    patternImage.src='http://i.stack.imgur.com/ixrWe.png';

    // for demo only, draw labels by each stroke
    ctx.fillStyle='black';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',100,40);
    ctx.fillText('Linear Gradient color',250,40);
    ctx.fillText('Radial Gradient color',100,140);
    ctx.fillText('Pattern color',250,140);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

lineWidth (attribut de style de chemin)

context.lineWidth=lineWidth

Définit la largeur de la ligne qui va marquer le contour du chemin

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    ctx.lineWidth=1;
    drawPolyline(50,50);

    ctx.lineWidth=5;
    drawPolyline(50,100);

    ctx.lineWidth=10;
    drawPolyline(50,150);


    // utility to draw a polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (attributs de style de chemin)

shadowColor = color        // CSS color
shadowBlur =  width        // integer blur width
shadowOffsetX = distance   // shadow is moved horizontally by this offset
shadowOffsetY = distance   // shadow is moved vertically by this offset

Cet ensemble d'attributs ajoutera une ombre autour d'un chemin.

Les chemins remplis et les chemins carpés peuvent avoir une ombre.

L'ombre est la plus sombre (opaque) sur le périmètre de la trajectoire et devient de plus en plus claire à mesure qu'elle s'éloigne du périmètre de la trajectoire.

• shadowColor indique quelle couleur CSS sera utilisée pour créer l'ombre.
• shadowBlur est la distance sur laquelle l'ombre s'étend vers l'extérieur du chemin.
• shadowOffsetX est une distance par laquelle l'ombre est décalée horizontalement du chemin. Une distance positive déplace l'ombre vers la droite, une distance négative déplace l'ombre vers la gauche.
• shadowOffsetY est une distance par laquelle l'ombre est décalée verticalement du chemin. Une distance positive déplace l'ombre vers le bas, une distance négative déplace l'ombre vers le haut.

À propos de shadowOffsetX & shadowOffsetY

Il est important de noter que l’ombre entière est déplacée dans son intégralité . Cela provoquera le déplacement d'une partie de l'ombre sous les chemins remplis et donc une partie de l'ombre ne sera pas visible.

À propos des traits ombrés

Lors de l'observation d'un trait, l'intérieur et l'extérieur du trait sont ombrés. L'ombre est la plus sombre au coup et s'éclaircit lorsque l'ombre s'étend vers l'extérieur dans les deux directions à partir du coup.

Désactiver l'ombrage une fois terminé

Après avoir dessiné vos ombres, vous voudrez peut-être désactiver l’ombre pour dessiner plus de chemins. Pour désactiver l'observation, définissez shadowColor sur transparent.

context.shadowColor = 'rgba(0,0,0,0)';

Considérations de performance

Les ombres (comme les dégradés) nécessitent des calculs approfondis et vous devez donc utiliser les ombres avec parcimonie.

Soyez particulièrement prudent lorsque vous animez, car dessiner des ombres plusieurs fois par seconde aura un impact considérable sur les performances. Une solution de contournement si vous devez animer des chemins ombrés consiste à pré-créer le chemin ombré sur un second "shadow-canvas". Le shadow-canvas est un canevas normal créé en mémoire avec document.createElement - il n'est pas ajouté au DOM (c'est juste un canevas intermédiaire). Ensuite, dessinez le shadow-canvas sur le canevas principal. C'est beaucoup plus rapide car les calculs d'ombre n'ont pas besoin d'être faits plusieurs fois par seconde. Tout ce que vous faites est de copier un canevas pré-construit sur votre canevas visible.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    // shadowed stroke
    ctx.shadowColor='black';
    ctx.shadowBlur=6;
    ctx.strokeStyle='red';
    ctx.strokeRect(50,50,100,50);
    // darken the shadow by stroking a second time
    ctx.strokeRect(50,50,100,50);

    // shadowed fill
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.fillStyle='red';
    ctx.fillRect(225,50,100,50);
    // darken the shadow by stroking a second time
    ctx.fillRect(225,50,100,50);

    // the shadow offset rightward and downward 
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.shadowOffsetX=5;
    ctx.shadowOffsetY=5;
    ctx.fillStyle='red';
    ctx.fillRect(50,175,100,50);

    // a wider blur (==extends further from the path)
    ctx.shadowColor='black';
    ctx.shadowBlur=35;
    ctx.fillStyle='red';
    ctx.fillRect(225,175,100,50);

    // always clean up! Turn off shadowing
    ctx.shadowColor='rgba(0,0,0,0)';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

createLinearGradient (crée un objet de style de chemin)

var gradient = createLinearGradient( startX, startY, endX, endY )
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

Crée un dégradé linéaire réutilisable (objet).

L'objet peut être affecté à n'importe quel strokeStyle et / ou fillStyle .

Puis stroke () ou fill () coloreront le chemin avec les couleurs de dégradé de l'objet.

La création d'un objet dégradé est un processus en deux étapes:

1. Créez l'objet dégradé lui-même. Lors de la création, vous définissez une ligne sur le canevas où le dégradé va commencer et se terminer. L'objet dégradé est créé avec var gradient = context.createLinearGradient .
2. Ajoutez ensuite 2 (ou plus) couleurs qui composent le dégradé. Cela se fait en ajoutant plusieurs arrêts de couleur à l'objet gradient.addColorStop avec gradient.addColorStop .

Arguments:

• startX, startY est la coordonnée de toile où le dégradé commence. Au point de départ (et avant), le canevas est solidement la couleur du gradientPercentPosition le plus bas.

• endX, endY est la coordonnée de la toile où le dégradé se termine. Au point final (et après), le canevas est solidement la couleur de la position de gradientPercentPosition la plus élevée.

• gradientPercentPosition est un nombre flottant compris entre 0,00 et 1,00 affecté à un arrêt de couleur. Il s’agit essentiellement d’un point de passage en pourcentage le long de la ligne où cet arrêt de couleur particulier s’applique.

  • Le dégradé commence au pourcentage 0,00, qui est [startX, startY] sur le canevas.
  • Le dégradé se termine au pourcentage 1,00 qui est [endX, endY] sur le canevas.
  • Note technique: Le terme "pourcentage" n'est pas techniquement correct puisque les valeurs vont de 0,00 à 1,00 plutôt que de 0% à 100%.

• CssColor est une couleur CSS assignée à cet arrêt de couleur particulier.

L'objet dégradé est un objet que vous pouvez utiliser (et réutiliser!) Pour que les traits et les remplissages de votre tracé deviennent dégradés.

Note latérale: L'objet dégradé n'est pas interne à l'élément Canvas ni à son contexte. C'est un objet JavaScript distinct et réutilisable que vous pouvez attribuer à n'importe quel chemin souhaité. Vous pouvez même utiliser cet objet pour colorer un chemin sur un autre élément Canvas (!)

Les arrêts de couleur sont des points de passage (en pourcentage) le long de la ligne de dégradé. A chaque point de passage de couleur, le dégradé est entièrement (== opaque) coloré avec la couleur qui lui est attribuée. Les points intermédiaires sur la ligne de dégradé entre les arrêts de couleur sont colorés en tant que dégradés de la couleur this et de la couleur précédente.

Conseil important sur les dégradés de la toile!

Lorsque vous créez un objet dégradé, l'intégralité du canevas est remplie de manière invisible par ce dégradé.

Lorsque vous stroke() ou fill() un chemin, le dégradé invisible est révélé, mais seulement révélé sur ce chemin en cours de trait ou de remplissage.

1. Si vous créez un dégradé linéaire rouge-magenta comme ceci:

    // create a linearGradient
    var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'magenta');
    ctx.fillStyle=gradient;
   

2. Alors Canvas verra "invisible" votre création de dégradé comme ceci:

3. Mais tant que vous n’aurez pas stroke() ou fill() avec le dégradé, vous ne verrez aucun dégradé sur le canevas.

4. Enfin, si vous tracez ou remplissez un tracé à l'aide du dégradé, le dégradé "invisible" devient visible sur le canevas ... mais uniquement là où le tracé est dessiné.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    // Create a linearGradient
    // Note: Nothing visually appears during this process
    var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'magenta');

    // Create a polyline path 
    // Note: Nothing visually appears during this process
    var x=20;
    var y=40;
    ctx.lineCap='round';
    ctx.lineJoin='round';
    ctx.lineWidth=15;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+30,y+50);
    ctx.lineTo(x+60,y);
    ctx.lineTo(x+90,y+50);
    ctx.lineTo(x+120,y);
    ctx.lineTo(x+150,y+50);
    ctx.lineTo(x+180,y);
    ctx.lineTo(x+210,y+50);
    ctx.lineTo(x+240,y);
    ctx.lineTo(x+270,y+50);
    ctx.lineTo(x+300,y);
    ctx.lineTo(x+330,y+50);
    ctx.lineTo(x+360,y);

    // Set the stroke style to be the gradient
    // Note: Nothing visually appears during this process
    ctx.strokeStyle=gradient;
    
    // stroke the path
    // FINALLY! The gradient-stroked path is visible on the canvas
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=150></canvas>
</body>
</html>

createRadialGradient (crée un objet de style de chemin)

var gradient = createRadialGradient( 
      centerX1, centerY1, radius1,     // this is the "display' circle
      centerX2, centerY2, radius2      // this is the "light casting" circle
)
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

Crée un dégradé radial réutilisable (objet). L'objet dégradé est un objet que vous pouvez utiliser (et réutiliser!) Pour que les traits et les remplissages de votre tracé deviennent dégradés.

Sur...

Le dégradé radial Canvas est extrêmement différent des dégradés radiaux traditionnels.

La définition "officielle" (presque indéchiffrable!) Du dégradé radial de Canvas se trouve au bas de cet article. Ne le regardez pas si vous avez une mauvaise disposition !!

En termes (presque compréhensibles):

• Le dégradé radial comporte 2 cercles: un cercle de "coulée" et un cercle "d'affichage".
• Le cercle de lancement projette la lumière dans le cercle d'affichage.
• Cette lumière est le dégradé.
• La forme de cette lumière dégradée est déterminée par la taille et la position relatives des deux cercles.

La création d'un objet dégradé est un processus en deux étapes:

1. Créez l'objet dégradé lui-même. Lors de la création, vous définissez une ligne sur le canevas où le dégradé va commencer et se terminer. L'objet dégradé est créé avec var gradient = context.radialLinearGradient .
2. Ajoutez ensuite 2 (ou plus) couleurs qui composent le dégradé. Cela se fait en ajoutant plusieurs arrêts de couleur à l'objet gradient.addColorStop avec gradient.addColorStop .

Arguments:

• centerX1, centerY1, radius1 définit un premier cercle où le dégradé sera affiché.

• centerX2, centerY2, rayon2 définit un deuxième cercle qui projette la lumière dégradée dans le premier cercle.

• gradientPercentPosition est un nombre flottant compris entre 0,00 et 1,00 affecté à un arrêt de couleur. Il s'agit essentiellement d'un point de cheminement en pourcentage définissant où cet arrêt de couleur particulier s'applique le long du dégradé.

  • Le dégradé commence au pourcentage 0,00.
  • Le gradient se termine en pourcentage 1,00.
  • Note technique: Le terme "pourcentage" n'est pas techniquement correct puisque les valeurs vont de 0,00 à 1,00 plutôt que de 0% à 100%.

• CssColor est une couleur CSS assignée à cet arrêt de couleur particulier.

Note latérale: L'objet dégradé n'est pas interne à l'élément Canvas ni à son contexte. C'est un objet JavaScript distinct et réutilisable que vous pouvez attribuer à n'importe quel chemin souhaité. Vous pouvez même utiliser cet objet pour colorer un chemin sur un autre élément Canvas (!)

Les arrêts de couleur sont des points de passage (en pourcentage) le long de la ligne de dégradé. A chaque point de passage de couleur, le dégradé est entièrement (== opaque) coloré avec la couleur qui lui est attribuée. Les points intermédiaires sur la ligne de dégradé entre les arrêts de couleur sont colorés en tant que dégradés de la couleur this et de la couleur précédente.

Conseil important sur les dégradés de la toile!

Lorsque vous créez un objet dégradé, la totalité du dégradé radial est "invisible" sur la toile.

Lorsque vous stroke() ou fill() un chemin, le dégradé invisible est révélé, mais seulement révélé sur ce chemin en cours de trait ou de remplissage.

1. Si vous créez un dégradé radial vert sur rouge comme ceci:

    // create a radialGradient
    var x1=150;
    var y1=150;
    var x2=280;
    var y2=150;
    var r1=100;
    var r2=120;
    var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
   

2. Alors Canvas verra "invisible" votre création de dégradé comme ceci:

3. Mais tant que vous n’aurez pas stroke() ou fill() avec le dégradé, vous ne verrez aucun dégradé sur le canevas.

4. Enfin, si vous tracez ou remplissez un tracé à l'aide du dégradé, le dégradé "invisible" devient visible sur le canevas ... mais uniquement là où le tracé est dessiné.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; padding:10px; }
    #canvas{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // canvas related vars
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    
    // create a radial gradient
    var x1=150;
    var y1=175;
    var x2=350;
    var y2=175;
    var r1=100;
    var r2=40;
    x2=x1;
    var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;

    // fill a path with the gradient
    ctx.beginPath();
    ctx.moveTo(150,0);
    ctx.lineTo(300,150);
    ctx.lineTo(150,325);
    ctx.lineTo(0,150);
    ctx.lineTo(150,0);
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=325></canvas>
</body>
</html>

Les détails officiels effrayants

Qui décide de ce que `createRadialGradient fait?

Le W3C émet les spécifications officielles recommandées que les navigateurs utilisent pour créer l'élément Canvas Html5.

La spécification W3C pour createRadialGradient lit comme suit:

Que crée createRadialGradient

createRadialGradient … crée efficacement un cône, touché par les deux cercles définis lors de la création du dégradé, avec la partie du cône avant le cercle de départ (0.0) en utilisant la couleur du premier décalage, la partie du cône après le cercle de fin (1.0) en utilisant la couleur du dernier décalage et les zones extérieures au cône intactes par le dégradé (noir transparent).

Comment ça marche en interne

La createRadialGradient(x0, y0, r0, x1, y1, r1) prend six arguments, les trois premiers représentant le cercle de départ d’origine (x0, y0) et le rayon r0, les trois derniers représentant le cercle de fin d’origine (x1 , y1) et le rayon r1. Les valeurs sont en unités d'espace de coordonnées. Si l'un des r0 ou r1 est négatif, une exception IndexSizeError doit être levée. Sinon, la méthode doit renvoyer un radial CanvasGradient initialisé avec les deux cercles spécifiés.

Les dégradés radiaux doivent être rendus en procédant comme suit:

1. Si x0 = x1 et y0 = y1 et r0 = r1, le dégradé radial ne doit rien peindre. Abandonnez ces étapes.
2. Soit x (ω) = (x1-x0) ω + x0; Soit y (ω) = (y1-y0) ω + y0; Soit r (ω) = (r1-r0) ω + r0 Soit la couleur à ω la couleur à cette position sur le dégradé (avec les couleurs provenant de l'interpolation et de l'extrapolation décrites ci-dessus).
3. Pour toutes les valeurs de ω où r (ω)> 0, en commençant par la valeur de ω la plus proche de l'infini positif et se terminant par la valeur de ω la plus proche de l'infini négatif, tracer la circonférence du cercle de rayon r (ω) x (ω), y (ω)), avec la couleur à ω, mais ne peignant que sur les parties de la toile qui n'ont pas encore été peintes par les cercles précédents dans cette étape pour ce rendu du dégradé.

createPattern (crée un objet de style de chemin)

var pattern = createPattern(imageObject,repeat)

Crée un motif réutilisable (objet).

L'objet peut être affecté à n'importe quel strokeStyle et / ou fillStyle .

Alors stroke () ou fill () peindront le chemin avec le motif de l'objet.

Arguments:

• imageObject est une image qui sera utilisée comme motif. La source de l'image peut être:

  • HTMLImageElement --- un élément img ou une nouvelle image (),
  • HTMLCanvasElement --- un élément canvas,
  • HTMLVideoElement --- un élément vidéo (va saisir l'image vidéo actuelle)
  • ImageBitmap,
  • Goutte.

• repeat détermine comment l'imageObject sera répété à travers le canevas (un peu comme un arrière-plan CSS). Cet argument doit être délimité par des guillemets et les valeurs valides sont:

  • "répéter" --- le motif remplira la toile horizontalement et verticalement
  • "repeat-x" --- le motif ne se répète qu'horizontalement (1 ligne horizontale)
  • "repeat-y" --- le motif ne se répète que verticalement (1 ligne verticale)
  • "ne répéter aucun" --- le motif apparaît une seule fois (en haut à gauche)

L'objet pattern est un objet que vous pouvez utiliser (et réutiliser!) Pour créer des traits et des remplissages sur votre chemin.

Note latérale: L'objet pattern n'est pas interne à l'élément Canvas ni à son contexte. C'est un objet JavaScript distinct et réutilisable que vous pouvez attribuer à n'importe quel chemin souhaité. Vous pouvez même utiliser cet objet pour appliquer un motif à un chemin sur un autre élément Canvas (!)

Conseil important sur les motifs de la toile!

Lorsque vous créez un objet de modèle, l'intégralité du canevas est remplie de manière invisible (sous réserve de l'argument de repeat ).

Lorsque vous stroke() ou fill() un chemin, le motif invisible est révélé, mais ne se révèle que sur ce chemin caressé ou rempli.

1. Commencez avec une image que vous souhaitez utiliser comme motif. Important (!): Assurez-vous que votre image est complètement chargée (en utilisant patternimage.onload ) avant de tenter de l'utiliser pour créer votre motif.

2. Vous créez un motif comme celui-ci:

    // create a pattern
    var pattern = ctx.createPattern(patternImage,'repeat');
    ctx.fillStyle=pattern;
   

3. Alors Canvas verra "invisiblement" votre création de motif comme ceci:

4. Mais jusqu'à ce que vous stroke() ou fill() avec le motif, vous ne verrez aucun motif sur le canevas.

5. Enfin, si vous traitez ou remplissez un tracé à l'aide du motif, le motif "invisible" devient visible sur le canevas ... mais uniquement là où le tracé est dessiné.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    // fill using a pattern
    var patternImage=new Image();
    // IMPORTANT! 
    // Always use .onload to be sure the image has
    //     fully loaded before using it in .createPattern
    patternImage.onload=function(){
        // create a pattern object
        var pattern = ctx.createPattern(patternImage,'repeat');
        // set the fillstyle to that pattern
        ctx.fillStyle=pattern;
        // fill a rectangle with the pattern
        ctx.fillRect(50,50,150,100);
        // demo only, stroke the rect for clarity
        ctx.strokeRect(50,50,150,100);
    }
    patternImage.src='http://i.stack.imgur.com/K9EZl.png';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=325 height=250></canvas>
</body>
</html>

stroke (une commande de chemin)

context.stroke()

Fait en sorte que le périmètre du chemin soit tracé en fonction du context.strokeStyle actuel et que le tracé tracé soit dessiné visuellement sur le canevas.

Avant d'exécuter context.stroke (ou context.fill ), le chemin existe en mémoire et n'est pas encore dessiné visuellement sur le canevas.

Les traits inhabituels sont dessinés

Considérons cet exemple Path qui dessine une ligne noire de 1 pixel de [0,5] à [5,5] :

// draw a 1 pixel black line from [0,5] to [5,5]
context.strokeStyle='black';
context.lineWidth=1;
context.beginPath();
context.moveTo(0,5);
context.lineTo(5,5);
context.stroke();

Question: Qu'est-ce que le navigateur dessine sur la toile?

Vous vous attendez probablement à obtenir 6 pixels noirs sur y = 5

Mais (!) ... Canvas trace toujours des traits à mi-chemin de chaque côté du chemin défini!

Donc puisque la ligne est définie à y==5.0 Canvas veut tracer la ligne entre y==4.5 et y==5.5

Mais, encore une fois (!) ... L'écran de l'ordinateur ne peut pas dessiner des demi-pixels!

Alors, que faire avec les demi-pixels indésirables (en bleu ci-dessous)?

La réponse est que Canvas ordonne en fait à l’affichage de dessiner une ligne de 2 pixels de largeur entre 4.0 et 6.0 . Il colore également la ligne plus claire que le black défini. Ce comportement de dessin étrange est "anti-aliasing" et aide Canvas à éviter de dessiner des traits qui semblent irréguliers.

Une astuce de réglage qui fonctionne UNIQUEMENT pour les traits exactement horizontaux et verticaux

Vous pouvez obtenir une ligne noire pleine de 1 pixel en spécifiant que la ligne doit être dessinée sur le demi-pixel:

context.moveTo(0,5.5);
context.lineto(5,5.5);

Exemple de code utilisant context.stroke() pour dessiner un tracé tracé sur le canevas:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.lineWidth=2;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

remplir (une commande de chemin)

context.fill()

Fait en sorte que l'intérieur du chemin soit rempli en fonction du context.fillStyle actuel et que le chemin rempli soit dessiné visuellement sur le canevas.

Avant d'exécuter context.fill (ou context.stroke ), le chemin existe en mémoire et n'est pas encore dessiné visuellement sur le canevas.

Exemple de code utilisant context.fill() pour dessiner un chemin rempli sur le canevas:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.fillStyle='blue';
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

clip (une commande de chemin)

context.clip

Limite les futurs dessins à afficher uniquement dans le chemin actuel.

Exemple: Découpez cette image dans un chemin triangulaire

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

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

    var img=new Image();
    img.onload=start;
    img.src='http://i.stack.imgur.com/1CqWf.jpg'

    function start(){
        // draw a triangle path
        ctx.beginPath();
        ctx.moveTo(75,50);
        ctx.lineTo(125,100);
        ctx.lineTo(25,100);
        ctx.lineTo(75,50);
        
        // clip future drawings to appear only in the triangle
        ctx.clip();
        
        // draw an image
        ctx.drawImage(img,0,0);
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=150 height=150></canvas>
</body>
</html>