html5-canvas => Percorso (solo sintassi)

Sintassi

context.beginPath ()
context.moveTo (startx, starty)
context.lineTo (EndX, Endy)
context.arc (centerX, centerY, radius, startingRadianAngle, endingRadianAngle)
context.quadraticCurveTo (controlX, controlY, EndX, Endy)
context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, EndX, Endy)
context.arcTo (puntoX1, puntoY1, puntoX2, puntoY2, raggio)
context.rect (leftX, topY, width, height);
context.closePath ()

Panoramica dei comandi di disegno del percorso di base: linee e curve

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

TODO: collega ciascuno dei comandi di disegno sotto ai loro singoli esempi. Non so come farlo poiché i collegamenti ai singoli esempi puntano verso la cartella "bozza".

TODO: aggiungi esempi per questi comandi "azione" del percorso: stroke (), fill (), clip ()

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

Sentiero

Un percorso definisce un insieme di linee e curve che possono essere disegnate visibilmente sulla tela.

Un tracciato non viene disegnato automaticamente sulla tela. Ma le linee e le curve del percorso possono essere disegnate sulla tela usando un tratto stilizzato. E la forma creata dalle linee e dalle curve può anche essere riempita con un riempimento stilizzato.

I percorsi hanno usi che vanno oltre il disegno sulla tela:

Hit test se una coordinata x, y è all'interno della forma del percorso.
Definire una regione di ritaglio in cui saranno visibili solo i disegni all'interno dell'area di ritaglio. Tutti i disegni all'esterno dell'area di ritaglio non verranno disegnati (== trasparente), in modo simile all'overflow CSS.

I comandi di base del disegno del percorso sono:

BeginPath
moveTo
lineTo
arco
quadraticCurveTo
bezierCurveTo
arcTo
rect
closePath

Descrizione dei comandi di disegno di base:

BeginPath

context.beginPath()

Inizia l'assemblaggio di un nuovo set di comandi di percorso e scarta anche qualsiasi traccia precedentemente assemblato.

Lo scarto è un punto importante e spesso trascurato. Se non inizi un nuovo percorso, tutti i comandi di percorso precedentemente rilasciati verranno automaticamente ridisegnati.

Sposta anche la "penna" del disegno sull'origine in alto a sinistra della tela (== coordinate [0,0]).

moveTo

context.moveTo(startX, startY)

Sposta la posizione corrente della penna sulla coordinata [startX, inizioY].

Di default tutti i disegni di percorso sono collegati insieme. Quindi il punto finale di una linea o curva è il punto di partenza della linea o curva successiva. Ciò può causare l'estrazione di una linea inaspettata che collega due disegni adiacenti. Il comando context.moveTo fondamentalmente "preleva il pennino" e lo posiziona su una nuova coordinata in modo che la linea di collegamento automatica non venga disegnata.

lineTo

context.lineTo(endX, endY)

Disegna un segmento di linea dalla posizione corrente della penna per coordinare [endX, endY]

È possibile assemblare più comandi .lineTo per disegnare una polilinea. Ad esempio, è possibile assemblare 3 segmenti di linea per formare un triangolo.

arco

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

Disegna un arco circolare dato un punto centrale, raggio e angoli di inizio e fine. Gli angoli sono espressi come radianti. Per convertire i gradi in radianti puoi usare questa formula: radians = degrees * Math.PI / 180; .

L'angolo 0 è rivolto direttamente verso destra dal centro dell'arco. Per disegnare un cerchio completo puoi rendere endingAngle = startingAngle + 360 gradi (360 gradi == Math.PI 2): `context.arc (10,10,20,0, Math.PI 2);

Per impostazione predefinita, l'arco viene disegnato in senso orario, Un parametro opzionale [true | false] indica l'arco da disegnare in senso antiorario: context.arc(10,10,20,0,Math.PI*2,true)

quadraticCurveTo

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

Disegna una curva quadratica che inizia dalla posizione corrente della penna fino a una determinata coordinata finale. Un'altra determinata coordinata di controllo determina la forma (curvatura) della curva.

bezierCurveTo

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

Disegna una curva Bezier cubica che inizia dalla posizione corrente della penna fino a una determinata coordinata finale. Altre 2 coordinate di controllo date determinano la forma (curvatura) della curva.

arcTo

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

Disegna un arco circolare con un raggio dato. L'arco viene disegnato in senso orario all'interno del cuneo formato dalla posizione attuale della penna e dato due punti: Punto1 e Punto2.

Una linea che collega la posizione corrente della penna e l'inizio dell'arco viene automaticamente disegnata prima dell'arco.

rect

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

Disegna un rettangolo dato un angolo in alto a sinistra e una larghezza e altezza.

context.rect è un comando di disegno univoco perché aggiunge rettangoli disconnessi. Questi rettangoli scollegati non sono automaticamente collegati da linee.

closePath

context.closePath()

Disegna una linea dalla posizione corrente della penna fino alla coordinata del percorso iniziale.

Ad esempio, se disegni 2 linee che formano 2 rami di un triangolo, closePath "chiude" il triangolo disegnando la terza gamba del triangolo dal punto finale della 2a tappa al punto iniziale della prima gamba.

Il nome di questo comando spesso lo rende incompreso. context.closePath NON è un delimitatore finale di context.beginPath . Di nuovo, il comando closePath disegna una linea - non "chiude" un beginPath .

lineTo (un comando di percorso)

context.lineTo(endX, endY)

Disegna un segmento di linea dalla posizione corrente della penna per coordinare [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>

È possibile assemblare più comandi .line To per disegnare una polilinea. Ad esempio, è possibile assemblare 3 segmenti di linea per formare un triangolo.

<!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>

arco (un comando di percorso)

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

L'angolo 0 è rivolto direttamente verso destra dal centro dell'arco.

Per impostazione predefinita, l'arco viene disegnato in senso orario, Un parametro opzionale [true | false] indica l'arco da disegnare in senso antiorario: 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>

Per disegnare un cerchio completo puoi rendere endingAngle = startingAngle + 360 gradi (360 gradi == 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 (un comando path)

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

<!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 (un comando path)

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

<!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 (un comando path)

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

Disegna un arco circolare con un raggio dato. L'arco viene disegnato in senso orario all'interno del cuneo formato dalla posizione attuale della penna e dato due punti: Punto1 e Punto2.

Una linea che collega la posizione corrente della penna e l'inizio dell'arco viene automaticamente disegnata prima dell'arco.

<!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 (un comando di percorso)

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

Disegna un rettangolo dato un angolo in alto a sinistra e una larghezza e altezza.

<!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 è un comando di disegno univoco perché aggiunge rettangoli disconnessi.

Questi rettangoli scollegati non sono automaticamente collegati da linee.

<!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 (un comando path)

context.closePath()

Disegna una linea dalla posizione corrente della penna fino alla coordinata del percorso iniziale.

Ad esempio, se disegni 2 linee che formano 2 rami di un triangolo, closePath "chiude" il triangolo disegnando la terza gamba del triangolo dal punto finale della 2a tappa al punto iniziale della prima gamba.

Un equivoco spiegato!

Il nome di questo comando spesso lo rende incompreso.

context.closePath NON è un delimitatore finale di context.beginPath .

Di nuovo, il comando closePath disegna una linea - non "chiude" un beginPath.

Questo esempio disegna 2 gambe di un triangolo e usa closePath per completare (chiudere ?!) il triangolo disegnando la terza gamba. Quello che closePath sta effettivamente facendo è tracciare una linea dall'endpoint della seconda gamba fino al punto di partenza della prima gamba.

<!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 (un comando path)

context.beginPath()

Inizia l'assemblaggio di un nuovo set di comandi di percorso e scarta anche qualsiasi traccia precedentemente assemblato.

Sposta anche la "penna" del disegno sull'origine in alto a sinistra della tela (== coordinate [0,0]).

Sebbene facoltativo, dovresti SEMPRE avviare un percorso con beginPath

Lo scarto è un punto importante e spesso trascurato. Se non inizi un nuovo percorso con beginPath , qualsiasi comando di percorso precedentemente rilasciato verrà automaticamente ridisegnato.

Questi 2 demo tentano entrambi di disegnare una "X" con un tratto rosso e un tratto blu.

Questa prima demo utilizza correttamente beginPath per avviare il secondo tratto rosso. Il risultato è che la "X" ha correttamente sia una traccia rossa che una blu.

<!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>

Questa seconda demo lascia erroneamente beginPath al secondo colpo. Il risultato è che la "X" ha erroneamente entrambi i tratti rossi.

Il secondo stroke() disegna il secondo tratto rosso.

Ma senza un secondo beginPath , quello stesso secondo stroke() inoltre ridisegna in modo errato il primo tratto.

Poiché il secondo stroke() è ora stilizzato in rosso, il primo tratto blu viene sovrascritto da un tratto rosso colorato in modo errato.

<!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 (un attributo styling del percorso)

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

Imposta lo stile del cappuccio dei punti iniziali e finali della linea.

butt , lo stile lineCap predefinito, mostra i cappucci quadrati che non si estendono oltre i punti iniziale e finale della linea.
round , mostra tappi arrotondati che si estendono oltre i punti di inizio e fine della linea.
quadrato , mostra i cappucci quadrati che si estendono oltre i punti di inizio e fine della linea.

<!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 (un attributo styling del percorso)

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

Imposta lo stile utilizzato per collegare segmenti di linea contigui.

mitra , l'impostazione predefinita, unisce i segmenti di linea con un giunto appuntito.
rotondo , unisce segmenti di linea con un giunto arrotondato.
smusso , unisce segmenti di linea con un giunto smussato .

<!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 (un attributo styling del percorso)

context.strokeStyle=color

Imposta il colore che verrà utilizzato per tracciare il contorno del percorso corrente.

Queste sono opzioni di color (queste devono essere citate):

Un colore denominato CSS , ad esempio context.strokeStyle='red'
Un colore esadecimale , ad esempio context.strokeStyle='#FF0000'
Un colore RGB , ad esempio context.strokeStyle='rgb(red,green,blue)' dove rosso, verde e blu sono numeri interi 0-255 che indicano la forza di ciascun colore del componente.
Un colore HSL , ad esempio context.strokeStyle='hsl(hue,saturation,lightness)' dove hue è un numero intero 0-360 sulla ruota dei colori e saturazione e luminosità sono percentuali (0-100%) che indicano la forza di ciascun componente .
Un colore HSLA , ad esempio context.strokeStyle='hsl(hue,saturation,lightness,alpha)' dove hue è un numero intero 0-360 sulla ruota dei colori e saturazione e luminosità sono percentuali (0-100%) che indicano la forza di ogni componente e alfa è un valore decimale 0.00-1.00 che indica l'opacità.

Puoi anche specificare queste opzioni colore (queste opzioni sono oggetti creati dal contesto):

Un gradiente lineare che è un oggetto gradiente lineare creato con context.createLinearGradient
Un gradiente radiale che è un oggetto gradiente radiale creato con context.createRadialGradient
Un motivo che è un oggetto modello creato con 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 (un attributo styling del percorso)

context.fillStyle=color

Imposta il colore che verrà utilizzato per riempire l'interno del percorso corrente.

Queste sono opzioni di colore (queste devono essere citate):

Un colore denominato CSS , ad esempio context.fillStyle='red'
Un colore esadecimale , ad esempio context.fillStyle='#FF0000'
Un colore RGB , ad esempio context.fillStyle='rgb(red,green,blue)' dove rosso, verde e blu sono numeri interi 0-255 che indicano la forza di ciascun colore del componente.
Un colore HSL , ad esempio context.fillStyle='hsl(hue,saturation,lightness)' dove hue è un numero intero 0-360 sulla ruota dei colori e saturazione e luminosità sono percentuali (0-100%) che indicano la forza di ciascun componente .
Un colore HSLA , ad esempio context.fillStyle='hsl(hue,saturation,lightness,alpha)' dove hue è un numero intero 0-360 sulla ruota dei colori e saturazione e luminosità sono percentuali (0-100%) che indicano la forza di ogni componente e alfa è un valore decimale 0.00-1.00 che indica l'opacità.

Puoi anche specificare queste opzioni colore (queste opzioni sono oggetti creati dal contesto):

Un gradiente lineare che è un oggetto gradiente lineare creato con context.createLinearGradient

Un gradiente radiale che è un oggetto gradiente radiale creato con context.createRadialGradient

Un motivo che è un oggetto modello creato con 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 (attributo di stile del percorso)

context.lineWidth=lineWidth

Imposta la larghezza della linea che traccerà il contorno del percorso

<!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 (attributi di styling del percorso)

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

Questo insieme di attributi aggiungerà un'ombra attorno a un tracciato.

Sia i percorsi riempiti che i percorsi tracciati possono avere un'ombra.

L'ombra è più scura (opaca) sul perimetro del percorso e diventa gradualmente più leggera mentre si allontana dal perimetro del percorso.

shadowColor indica quale colore CSS verrà utilizzato per creare l'ombra.
shadowBlur è la distanza su cui l'ombra si estende verso l'esterno dal percorso.
shadowOffsetX è una distanza per cui l'ombra viene spostata orizzontalmente dal percorso. Una distanza positiva sposta l'ombra verso destra, una distanza negativa sposta l'ombra verso sinistra.
shadowOffsetY è una distanza per cui l'ombra viene spostata verticalmente lontano dal percorso. Una distanza positiva sposta l'ombra verso il basso, una distanza negativa sposta l'ombra verso l'alto.

Informazioni su shadowOffsetX e shadowOffsetY

È importante notare che l'intera ombra è spostata nella sua interezza . Ciò farà sì che parte dell'ombra si sposti al di sotto dei percorsi riempiti e quindi parte dell'ombra non sarà visibile.

Informazioni sui tratti ombreggiati

Quando si ombreggia un tratto, l'interno e l'esterno del tratto sono ombreggiati. L'ombra è più scura nel tratto e si illumina quando l'ombra si estende verso l'esterno in entrambe le direzioni rispetto al tratto.

Disattivazione dell'ombreggiamento al termine

Dopo aver disegnato le ombre, potresti voler disattivare lo shadowing per disegnare più percorsi. Per disattivare l'ombreggiatura, imposta shadowColor su trasparente.

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

Considerazioni sulle prestazioni

Le ombre (come i gradienti) richiedono calcoli estesi e quindi è necessario utilizzare le ombre con parsimonia.

Prestare particolare attenzione durante l'animazione, poiché disegnare ombre molte volte al secondo avrà un impatto notevole sulle prestazioni. Una soluzione alternativa se è necessario animare i percorsi ombreggiati consiste nel pre-creare il percorso ombreggiato su un secondo "riquadro ombra". La tela ombra è una tela normale che viene creata in memoria con document.createElement : non viene aggiunta al DOM (è solo una tela di staging). Quindi disegna la tela ombra sulla tela principale. Questo è molto più veloce perché i calcoli dell'ombra non devono essere fatti molte volte al secondo. Tutto quello che stai facendo è copiare una tela prefabbricata sulla tela visibile.

<!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 (crea un oggetto di stile del percorso)

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]

Crea un gradiente lineare riutilizzabile (oggetto).

L'oggetto può essere assegnato a qualsiasi strokeStyle e / o fillStyle .

Quindi il tratto () o il riempimento () coloreranno il tracciato con i colori sfumati dell'oggetto.

La creazione di un oggetto sfumato è una procedura in due passaggi:

Crea l'oggetto gradiente stesso. Durante la creazione, definisci una linea sulla tela in cui inizia e termina la sfumatura. L'oggetto gradiente viene creato con var gradient = context.createLinearGradient .
Quindi aggiungi 2 (o più) colori che compongono il gradiente. Questo viene fatto aggiungendo più stop di colore all'oggetto gradient.addColorStop con gradient.addColorStop .

Argomenti:

startX, startY è la coordinata del canvas in cui inizia la sfumatura. Al punto di partenza (e prima) la tela è solidamente il colore della più bassa gradientPercentPosition .
endX, endY è la coordinata del canvas in cui termina il gradiente. Al punto finale (e dopo) la tela è solidamente il colore della più alta gradientPercentPosition .
gradientPercentPosition è un numero float compreso tra 0,00 e 1,00 assegnato a un arresto colore. È fondamentalmente un waypoint in percentuale lungo la linea in cui si applica questo particolare arresto del colore.
- Il gradiente inizia alla percentuale 0,00 che è [startX, startY] sulla tela.
- Il gradiente termina con la percentuale 1,00 che è [endX, endY] sulla tela.
- Nota tecnica: il termine "percentuale" non è tecnicamente corretto poiché i valori vanno da 0,00 a 1,00 anziché dallo 0% al 100%.
CssColor è un colore CSS assegnato a questo particolare arresto del colore.

L'oggetto gradiente è un oggetto che puoi usare (e riutilizzare!) Per fare in modo che i tratti e i riempimenti del tuo percorso diventino sfumati.

Nota a margine: l'oggetto sfumato non è interno all'elemento Canvas né è Context. È un oggetto JavaScript separato e riutilizzabile che puoi assegnare a qualsiasi percorso che desideri. Puoi persino usare questo oggetto per colorare un percorso su un elemento Canvas diverso (!)

Le interruzioni di colore sono (percentuali) waypoint lungo la linea del gradiente. Ad ogni fermo del colore, il gradiente è completamente (== opaco) colorato con il colore assegnato. I punti intermedi lungo la linea del gradiente tra i fermi colore sono colorati come gradienti di questo e del colore precedente.

Suggerimento importante sui gradienti della tela!

Quando crei un oggetto sfumato, l'intera tela è "invisibilmente" piena di quel gradiente.

Quando si percorre stroke() o si fill() un tracciato, il gradiente invisibile viene rivelato, ma solo rivelato su quel percorso che viene tracciato o riempito.

Se crei un gradiente lineare da rosso a magenta come questo:

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

Quindi Canvas visualizzerà "in modo invisibile" la creazione della sfumatura in questo modo:

Ma fino a quando non si stroke() o si fill() con il gradiente, non vedrai nessuno dei gradienti sulla tela.
Infine, se si accarezza o si riempie un percorso usando la sfumatura, la sfumatura "invisibile" diventa visibile sulla tela ... ma solo dove viene disegnato il tracciato.

<!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 (crea un oggetto di stile del percorso)

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]

Crea un gradiente radiale riutilizzabile (oggetto). L'oggetto gradiente è un oggetto che puoi usare (e riutilizzare!) Per fare in modo che i tratti e i riempimenti del tuo percorso diventino sfumati.

Di...

Il gradiente radiale Canvas è estremamente diverso dai tradizionali gradienti radiali.

La definizione "ufficiale" (quasi indecifrabile!) Del gradiente radiale di Canvas è in fondo a questo post. Non guardarlo se hai una debole predisposizione !!

In termini (quasi comprensibili):

Il gradiente radiale ha 2 cerchi: un cerchio "casting" e un cerchio "display".
Il cerchio di lancio proietta la luce nel cerchio del display.
Quella luce è il gradiente.
La forma di quella luce sfumata è determinata dalla dimensione relativa e dalla posizione di entrambi i cerchi.

La creazione di un oggetto sfumato è una procedura in due passaggi:

Crea l'oggetto gradiente stesso. Durante la creazione, definisci una linea sulla tela in cui inizia e termina la sfumatura. L'oggetto gradiente viene creato con var gradient = context.radialLinearGradient .
Quindi aggiungi 2 (o più) colori che compongono il gradiente. Questo viene fatto aggiungendo più stop di colore all'oggetto gradient.addColorStop con gradient.addColorStop .

Argomenti:

centerX1, centerY1, raggio1 definisce un primo cerchio in cui verrà visualizzato il gradiente.
centerX2, centerY2, raggio2 definisce un secondo cerchio che lancia la luce sfumata nel primo cerchio.
gradientPercentPosition è un numero float compreso tra 0,00 e 1,00 assegnato a un arresto colore. È fondamentalmente un punto di riferimento in percentuale che definisce dove questo particolare arresto del colore si applica lungo il gradiente.
- Il gradiente inizia in percentuale 0,00.
- Il gradiente termina in percentuale 1,00.
- Nota tecnica: il termine "percentuale" non è tecnicamente corretto poiché i valori vanno da 0,00 a 1,00 anziché dallo 0% al 100%.
CssColor è un colore CSS assegnato a questo particolare arresto del colore.

Suggerimento importante sui gradienti della tela!

Quando crei un oggetto sfumato, l'intera sfumatura radiale viene proiettata "in modo invisibile" sulla tela.

Quando si percorre stroke() o si fill() un tracciato, il gradiente invisibile viene rivelato, ma solo rivelato su quel percorso che viene tracciato o riempito.

Se crei un gradiente radiale da verde a rosso come questo:

 // 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;

Quindi Canvas visualizzerà "in modo invisibile" la creazione della sfumatura in questo modo:

Ma fino a quando non si stroke() o si fill() con il gradiente, non vedrai nessuno dei gradienti sulla tela.
Infine, se si accarezza o si riempie un percorso usando la sfumatura, la sfumatura "invisibile" diventa visibile sulla tela ... ma solo dove viene disegnato il tracciato.

<!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>

I dettagli ufficiali spaventosi

Chi decide cosa `creaRadialGradient?

Il W3C rilascia le specifiche ufficiali raccomandate che i browser usano per costruire l'elemento Html5 Canvas.

Le specifiche W3C per createRadialGradient leggono in modo criptico come questo:

Cosa crea createRadialGradient

createRadialGradient ... crea effettivamente un cono, toccato dai due cerchi definiti nella creazione del gradiente, con la parte del cono prima del cerchio iniziale (0.0) utilizzando il colore del primo offset, la parte del cono dopo il cerchio finale (1.0) utilizzando il colore dell'ultimo offset e le aree esterne al cono non toccate dal gradiente (nero trasparente).

Come funziona internamente

Il createRadialGradient(x0, y0, r0, x1, y1, r1) accetta sei argomenti, i primi tre rappresentano il cerchio iniziale con origine (x0, y0) e raggio r0 e gli ultimi tre rappresentano il cerchio finale con origine (x1 , y1) e raggio r1. I valori sono in unità spaziali coordinate. Se uno dei file r0 o r1 è negativo, deve essere generata un'eccezione IndexSizeError. In caso contrario, il metodo deve restituire un CanvasGradient radiale inizializzato con i due cerchi specificati.
I gradienti radiali devono essere visualizzati seguendo questi passaggi:
Se x0 = x1 e y0 = y1 e r0 = r1, allora il gradiente radiale non deve dipingere nulla. Annullare questi passaggi.
Sia x (ω) = (x1-x0) ω + x0; Sia y (ω) = (y1-y0) ω + y0; Sia r (ω) = (r1-r0) ω + r0 Lascia che il colore in ω sia il colore in quella posizione sul gradiente (con i colori che provengono dall'interpolazione e dall'estrapolazione sopra descritti).
Per tutti i valori di ω dove r (ω)> 0, partendo dal valore di ω più vicino all'infinito positivo e finendo con il valore di ω più vicino all'infinito negativo, traccia la circonferenza del cerchio con raggio r (ω) in posizione ( x (ω), y (ω)), con il colore in ω, ma solo la pittura sulle parti della tela che non sono state ancora dipinte da cerchi precedenti in questo passaggio per questo rendering del gradiente.

createPattern (crea un oggetto di stile del percorso)

var pattern = createPattern(imageObject,repeat)

Crea un modello riutilizzabile (oggetto).

L'oggetto può essere assegnato a qualsiasi strokeStyle e / o fillStyle .

Quindi stroke () o fill () dipingerà il Path con il pattern dell'oggetto.

Argomenti:

imageObject è un'immagine che verrà utilizzata come pattern. La fonte dell'immagine può essere:
- HTMLImageElement --- un elemento img o una nuova immagine (),
- HTMLCanvasElement --- un elemento canvas,
- HTMLVideoElement --- un elemento video (catturerà il fotogramma video corrente)
- ImageBitmap,
- Blob.
repeat determina come l'imageObject verrà ripetuto sull'area di disegno (proprio come in uno sfondo CSS). Questo argomento deve essere delimitato da virgolette e i valori validi sono:
- "repeat" --- il pattern riempie orizzontalmente e verticalmente la tela
- "repeat-x" --- il pattern si ripeterà solo orizzontalmente (1 riga orizzontale)
- "repeat-y" --- il pattern si ripeterà solo verticalmente (1 riga verticale)
- "repeat none" --- il pattern appare solo una volta (in alto a sinistra)

L'oggetto modello è un oggetto che puoi usare (e riutilizzare!) Per fare in modo che i tratti e i riempimenti del tuo percorso vengano modellati.

Nota a margine: l'oggetto modello non è interno all'elemento Canvas né è Context. È un oggetto JavaScript separato e riutilizzabile che puoi assegnare a qualsiasi percorso che desideri. Puoi persino usare questo oggetto per applicare il modello a un tracciato su un elemento Canvas diverso (!)

Suggerimento importante sui modelli di tela!

Quando crei un oggetto motivo, l'intera tela è "invisibilmente" piena di quel motivo (soggetto all'argomento repeat ).

Quando si percorre stroke() o si fill() un percorso, viene rivelato il motivo invisibile, ma solo rivelato su quel percorso che viene tracciato o riempito.

Inizia con un'immagine che desideri utilizzare come modello. Importante (!): Assicurati che l'immagine sia completamente caricata (utilizzando patternimage.onload ) prima di provare a utilizzarla per creare il tuo pattern.

Crei uno schema come questo:

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

Quindi Canvas visualizzerà "invisibilmente" la creazione del tuo pattern in questo modo:

Ma fino a quando non si stroke() o si fill() con il motivo, non vedrai nessuno dei motivi sulla tela.
Infine, se si fa un tratto o si riempie un percorso usando il modello, il motivo "invisibile" diventa visibile sulla tela ... ma solo dove viene disegnato il tracciato.

<!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>

tratto (un comando di percorso)

context.stroke()

Fa sì che il perimetro del tracciato venga tracciato in base al context.strokeStyle corrente.strokeStyle e il tracciato tratteggiato viene visivamente disegnato sull'area di disegno.

Prima di eseguire context.stroke (o context.fill ) il Path esiste in memoria e non è ancora disegnato visivamente sulla tela.

I tratti inusuali sono disegnati

Considera questo esempio Path che disegna una linea nera da 1 pixel da [0,5] a [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();

Domanda: che cosa il browser effettivamente disegna sulla tela?

Probabilmente ti aspetteresti di ottenere 6 pixel neri su y = 5

Ma (!) ... La tela disegna sempre tratti a metà strada su entrambi i lati del percorso definito!

Quindi dal momento che la linea è definita in y==5.0 Canvas vuole tracciare la linea tra y==4.5 e y==5.5

Ma, ancora una volta (!) ... Il display del computer non può disegnare mezzo pixel!

Quindi cosa si deve fare con i semi-pixel indesiderati (mostrati in blu sotto)?

La risposta è che Canvas in effetti ordina al display di disegnare una linea larga 2 pixel dalla 4.0 alla 6.0 . Inoltre, colora la linea più chiara del black definito. Questo strano comportamento di disegno è "anti-aliasing" e aiuta Canvas a evitare di disegnare tratti che sembrano frastagliati.

Un trucco di regolazione che funziona SOLO per i tratti orizzontali e verticali

Puoi ottenere una linea nera piena di 1 pixel specificando la linea da disegnare sul mezzo pixel:

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

Esempio di codice che utilizza context.stroke() per tracciare un tracciato tracciato sulla tela:

<!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>

riempire (un comando di percorso)

context.fill()

Fa sì che l'interno del percorso venga riempito in base al context.fillStyle corrente.fillStyle e il percorso riempito viene visivamente disegnato sulla tela.

Prima di eseguire context.fill (o context.stroke ) il Path esiste in memoria e non è ancora disegnato visivamente sulla tela.

Esempio di codice utilizzando context.fill() per disegnare un percorso pieno context.fill() di disegno:

<!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 (un comando di percorso)

context.clip

Limita eventuali disegni futuri da visualizzare solo all'interno del percorso corrente.

Esempio: ritaglia questa immagine in un percorso triangolare

<!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>

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

html5-canvas
Percorso (solo sintassi)

Ricerca…

Sintassi

Panoramica dei comandi di disegno del percorso di base: linee e curve

Descrizione dei comandi di disegno di base:

lineTo (un comando di percorso)

arco (un comando di percorso)

quadraticCurveTo (un comando path)

bezierCurveTo (un comando path)

arcTo (un comando path)

rect (un comando di percorso)

closePath (un comando path)

beginPath (un comando path)

lineCap (un attributo styling del percorso)

lineJoin (un attributo styling del percorso)

strokeStyle (un attributo styling del percorso)

fillStyle (un attributo styling del percorso)

lineWidth (attributo di stile del percorso)

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (attributi di styling del percorso)

createLinearGradient (crea un oggetto di stile del percorso)

createRadialGradient (crea un oggetto di stile del percorso)

I dettagli ufficiali spaventosi

createPattern (crea un oggetto di stile del percorso)

tratto (un comando di percorso)

I tratti inusuali sono disegnati

riempire (un comando di percorso)

clip (un comando di percorso)