html5-canvas
Ścieżka (tylko składnia)

Składnia

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

Przegląd podstawowych poleceń do rysowania ścieżek: linii i krzywych

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

DO ZROBIENIA: Połącz każde z poniższych poleceń rysunkowych z ich indywidualnymi przykładami. Nie wiem, jak to zrobić, ponieważ linki do poszczególnych przykładów wskazują na folder „szkicowy”.

DO ZROBIENIA: Dodaj przykłady dla tych poleceń „akcji” ścieżki: stroke (), fill (), clip ()

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

Ścieżka

Ścieżka definiuje zestaw linii i krzywych, które można w widoczny sposób narysować na kanwie.

Ścieżka nie jest automatycznie rysowana na kanwie. Ale linie i krzywe ścieżki można narysować na kanwie za pomocą stylowego obrysu. Kształt utworzony przez linie i krzywe można również wypełnić stylowym wypełnieniem.

Ścieżki mają inne zastosowania niż rysowanie na płótnie:

• Testuj, czy współrzędna x, y znajduje się wewnątrz kształtu ścieżki.
• Definiowanie obszaru przycinania, w którym będą widoczne tylko rysunki w obszarze przycinania. Rysunki poza obszarem przycinania nie zostaną narysowane (== przezroczyste) - podobnie jak przepełnienie CSS.

Podstawowe polecenia rysowania ścieżki to:

• beginPath
• moveTo
• lineTo
• łuk
• quadraticCurveTo
• bezierCurveTo
• arcTo
• rect
• closePath

Opis podstawowych poleceń rysowania:

beginPath

context.beginPath()

Zaczyna składać nowy zestaw poleceń ścieżki, a także odrzuca wszystkie wcześniej złożone ścieżki.

Odrzucanie jest ważnym i często pomijanym punktem. Jeśli nie zaczniesz nowej ścieżki, wszelkie wcześniej wydane polecenia ścieżki zostaną automatycznie przerysowane.

Przesuwa także rysunkowy „długopis” do lewego górnego początku płótna (== współrzędna [0,0]).

moveTo

context.moveTo(startX, startY)

Przenosi bieżącą lokalizację pisaka do współrzędnych [startX, startY].

Domyślnie wszystkie rysunki ścieżek są połączone razem. Zatem punkt końcowy jednej linii lub krzywej jest punktem początkowym następnej linii lub krzywej. Może to spowodować narysowanie nieoczekiwanej linii łączącej dwa sąsiednie rysunki. Polecenie context.moveTo zasadzie „podnosi pióro do rysowania” i umieszcza je w nowej współrzędnej, aby automatyczna linia łącząca nie była rysowana.

lineTo

context.lineTo(endX, endY)

Rysuje segment linii z bieżącej lokalizacji pisaka w celu koordynacji [endX, endY]

Możesz złożyć wiele poleceń .lineTo , aby narysować polilinię. Na przykład, możesz złożyć 3 segmenty linii, aby utworzyć trójkąt.

łuk

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

Rysuje łuk kołowy na podstawie punktu środkowego, promienia oraz kątów początkowych i końcowych. Kąty są wyrażone w radianach. Aby przekonwertować stopnie na radiany, możesz użyć tej formuły: radians = degrees * Math.PI / 180; .

Kąt 0 jest skierowany bezpośrednio w prawo od środka łuku. Aby narysować pełny okrąg, możesz zrobić endingAngle = startAngle + 360 stopni (360 stopni == Math.PI 2): `context.arc (10,10,20,0, Math.PI 2);

Domyślnie łuk jest rysowany zgodnie z ruchem wskazówek zegara. Opcjonalny parametr [true | false] nakazuje rysowanie łuku przeciwnie do ruchu wskazówek zegara: context.arc(10,10,20,0,Math.PI*2,true)

quadraticCurveTo

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

Rysuje krzywą kwadratową, zaczynając od bieżącego położenia pisaka, do określonej współrzędnej końcowej. Inna podana współrzędna kontrolna określa kształt (krzywiznę) krzywej.

bezierCurveTo

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

Rysuje sześcienną krzywą Beziera, zaczynając od bieżącego położenia pisaka, do określonej współrzędnej końcowej. Kolejne 2 podane współrzędne kontrolne określają kształt (krzywiznę) krzywej.

arcTo

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

Rysuje łuk kołowy o danym promieniu. Łuk jest rysowany zgodnie z ruchem wskazówek zegara wewnątrz klina utworzonego przez bieżące położenie pisaka i otrzymuje dwa punkty: Punkt 1 i Punkt 2.

Linia łącząca bieżącą lokalizację pisaka z początkiem łuku jest automatycznie rysowana przed łukiem.

rect

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

Rysuje prostokąt na podstawie lewego górnego rogu oraz szerokości i wysokości.

context.rect to unikalne polecenie rysowania, ponieważ dodaje rozłączone prostokąty. Te odłączone prostokąty nie są automatycznie łączone liniami.

closePath

context.closePath()

Rysuje linię z bieżącego położenia pisaka z powrotem do współrzędnej ścieżki początkowej.

Na przykład, jeśli narysujesz 2 linie tworzące 2 nogi trójkąta, closePath „zamknie” trójkąt, rysując trzecią nogę trójkąta od punktu końcowego drugiej nogi z powrotem do punktu początkowego pierwszej nogi.

Nazwa tego polecenia często powoduje, że jest źle rozumiany. context.closePath NIE jest końcowym ogranicznikiem do pliku context.beginPath . Ponownie polecenie closePath rysuje linię - nie „zamyka” beginPath .

lineTo (polecenie ścieżki)

context.lineTo(endX, endY)

Rysuje segment linii z bieżącej lokalizacji pisaka w celu koordynacji [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>

Możesz złożyć wiele poleceń .lineTo, aby narysować polilinię. Na przykład, możesz złożyć 3 segmenty linii, aby utworzyć trójkąt.

<!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 (polecenie ścieżki)

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

Rysuje łuk kołowy na podstawie punktu środkowego, promienia oraz kątów początkowych i końcowych. Kąty są wyrażone w radianach. Aby przekonwertować stopnie na radiany, możesz użyć tej formuły: radians = degrees * Math.PI / 180; .

Kąt 0 jest skierowany bezpośrednio w prawo od środka łuku.

Domyślnie łuk jest rysowany zgodnie z ruchem wskazówek zegara. Opcjonalny parametr [true | false] nakazuje rysowanie łuku przeciwnie do ruchu wskazówek zegara: 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>

Aby narysować pełny okrąg, możesz zrobić endingAngle = startAngle + 360 stopni (360 stopni == 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 (polecenie ścieżki)

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

Rysuje krzywą kwadratową, zaczynając od bieżącego położenia pisaka, do określonej współrzędnej końcowej. Inna podana współrzędna kontrolna określa kształt (krzywiznę) krzywej.

<!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 (polecenie ścieżki)

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

Rysuje sześcienną krzywą Beziera, zaczynając od bieżącego położenia pisaka, do określonej współrzędnej końcowej. Kolejne 2 podane współrzędne kontrolne określają kształt (krzywiznę) krzywej.

<!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 (polecenie ścieżki)

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

Rysuje łuk kołowy o danym promieniu. Łuk jest rysowany zgodnie z ruchem wskazówek zegara wewnątrz klina utworzonego przez bieżące położenie pisaka i otrzymuje dwa punkty: Punkt 1 i Punkt 2.

Linia łącząca bieżącą lokalizację pisaka z początkiem łuku jest automatycznie rysowana przed łukiem.

<!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 (polecenie ścieżki)

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

Rysuje prostokąt na podstawie lewego górnego rogu oraz szerokości i wysokości.

<!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 to unikalne polecenie rysowania, ponieważ dodaje rozłączone prostokąty.

Te odłączone prostokąty nie są automatycznie łączone liniami.

<!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 (polecenie ścieżki)

context.closePath()

Rysuje linię z bieżącego położenia pisaka z powrotem do współrzędnej ścieżki początkowej.

Na przykład, jeśli narysujesz 2 linie tworzące 2 nogi trójkąta, closePath „zamknie” trójkąt, rysując trzecią nogę trójkąta od punktu końcowego drugiej nogi z powrotem do punktu początkowego pierwszej nogi.

Wyjaśnienie nieporozumienia!

Nazwa tego polecenia często powoduje, że jest źle rozumiany.

context.closePath NIE jest końcowym ogranicznikiem do pliku context.beginPath .

Ponownie polecenie closePath rysuje linię - nie „zamyka” ścieżki beginPath.

Ten przykład rysuje 2 nogi trójkąta i używa closePath do ukończenia (zamknięcia ?!) trójkąta poprzez narysowanie trzeciej nogi. To, closePath faktycznie robi closePath to narysowanie linii od punktu końcowego drugiej nogi do punktu początkowego pierwszej nogi.

<!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 (polecenie ścieżki)

context.beginPath()

Zaczyna składać nowy zestaw poleceń ścieżki, a także odrzuca wszystkie wcześniej złożone ścieżki.

Przesuwa także rysunkowy „długopis” do lewego górnego początku płótna (== współrzędna [0,0]).

Chociaż jest to opcjonalne, ZAWSZE należy rozpocząć ścieżkę od beginPath

Odrzucanie jest ważnym i często pomijanym punktem. Jeśli nie zaczniesz nowej ścieżki od beginPath , wszelkie wcześniej wydane polecenia ścieżki zostaną automatycznie przerysowane.

Te dwa dema próbują narysować „X” jednym czerwonym pociągnięciem i jednym niebieskim pociągnięciem.

To pierwsze demo poprawnie używa beginPath aby rozpocząć swój drugi czerwony skok. Powoduje to, że „X” poprawnie ma zarówno czerwony, jak i niebieski obrys.

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

To drugie demo niepoprawnie beginPath przy drugim uderzeniu. Powoduje to, że „X” niepoprawnie ma oba czerwone pociągnięcia.

Drugi stroke() rysuje drugi czerwony skok.

Ale bez drugiego beginPath ten sam drugi stroke() również nieprawidłowo przerysowuje pierwszy skok.

Ponieważ drugi stroke() ma teraz styl czerwony, pierwszy niebieski obrys jest zastępowany niepoprawnie zabarwionym czerwonym obrysem.

<!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 (atrybut stylu ścieżki)

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

Ustawia styl zakończenia punktów początkowych i końcowych linii.

• butt , domyślny styl liniiCap, pokazuje kwadratowe czapki, które nie wystają poza punkty początkowe i końcowe linii.

• okrągły , pokazuje zaokrąglone czapki, które wykraczają poza punkty początkowe i końcowe linii.

• kwadrat , pokazuje czapki kwadratowe, które wystają poza punkty początkowe i końcowe linii.

<!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 (atrybut stylu ścieżki)

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

Ustawia styl używany do łączenia sąsiednich segmentów linii.

• mitre , domyślnie, łączy segmenty linii ostrym złączem.
• okrągły , łączy segmenty linii zaokrąglonym złączem.
• faza , łączy segmenty linii z tępym złączem.

<!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 (atrybut stylu ścieżki)

context.strokeStyle=color

Ustawia kolor, który będzie używany do obrysu konturu bieżącej ścieżki.

Oto opcje color (należy je zacytować):

• Kolor o nazwie CSS , na przykład context.strokeStyle='red'

• Kolor szesnastkowy , na przykład context.strokeStyle='#FF0000'

• Kolor RGB , na przykład context.strokeStyle='rgb(red,green,blue)' gdzie czerwony, zielony i niebieski to liczby całkowite 0–255, wskazujące siłę każdego koloru komponentu.

• Kolor HSL , na przykład context.strokeStyle='hsl(hue,saturation,lightness)' gdzie odcień jest liczbą całkowitą 0–360 na kole kolorów, a nasycenie i jasność to wartości procentowe (0–100%) wskazujące siłę każdego składnika .

• Kolor HSLA , na przykład context.strokeStyle='hsl(hue,saturation,lightness,alpha)' gdzie odcień jest liczbą całkowitą 0–360 na kole kolorów, a nasycenie i jasność to wartości procentowe (0–100%) wskazujące na siłę każdy składnik i alfa mają wartość dziesiętną 0,00-1,00, wskazując zmętnienie.

Możesz także określić te opcje kolorów (są to obiekty tworzone przez kontekst):

• Gradient liniowy, który jest liniowym obiektem gradientowym utworzonym za pomocą context.createLinearGradient

• Gradient radialny, który jest radialnym obiektem gradientowym utworzonym za pomocą context.createRadialGradient

• Wzór będący obiektem wzoru utworzonym za pomocą 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 (atrybut stylu ścieżki)

context.fillStyle=color

Ustawia kolor, który będzie używany do wypełnienia wnętrza bieżącej ścieżki.

Oto opcje kolorów (należy je zacytować):

• Kolor o nazwie CSS , na przykład context.fillStyle='red'

• Kolor szesnastkowy , na przykład context.fillStyle='#FF0000'

• Kolor RGB , na przykład context.fillStyle='rgb(red,green,blue)' gdzie czerwony, zielony i niebieski to liczby całkowite 0–255, wskazujące siłę każdego koloru komponentu.

• Kolor HSL , na przykład w context.fillStyle='hsl(hue,saturation,lightness)' .

• Kolor HSLA , na przykład w context.fillStyle='hsl(hue,saturation,lightness,alpha)' każdy składnik i alfa mają wartość dziesiętną 0,00-1,00, wskazując zmętnienie.

Możesz także określić te opcje kolorów (są to obiekty tworzone przez kontekst):

• Gradient liniowy, który jest liniowym obiektem gradientowym utworzonym za pomocą context.createLinearGradient

• Gradient radialny, który jest radialnym obiektem gradientowym utworzonym za pomocą context.createRadialGradient

• Wzór będący obiektem wzoru utworzonym za pomocą 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 (atrybut stylu ścieżki)

context.lineWidth=lineWidth

Ustawia szerokość linii, która obrysuje kontur ścieżki

<!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 (atrybuty stylu ścieżki)

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

Ten zestaw atrybutów doda cień wokół ścieżki.

Zarówno ścieżki wypełnione, jak i obrysowane mogą mieć cień.

Cień jest najciemniejszy (nieprzezroczysty) na obwodzie ścieżki i staje się gradientowo jaśniejszy w miarę oddalania się od obwodu ścieżki.

• shadowColor wskazuje, który kolor CSS zostanie użyty do utworzenia cienia.
• shadowBlur to odległość, na jaką cień rozciąga się na zewnątrz ścieżki.
• shadowOffsetX to odległość, o jaką cień jest przesuwany w poziomie od ścieżki. Dodatnia odległość przesuwa cień w prawo, ujemna odległość przesuwa cień w lewo.
• shadowOffsetY to odległość, o jaką cień jest przesuwany pionowo od ścieżki. Dodatnia odległość przesuwa cień w dół, ujemna odległość przesuwa cień w górę.

Informacje o shadowOffsetX i shadowOffsetY

Ważne jest, aby pamiętać, że cały cień jest przesunięty w całości . Spowoduje to przesunięcie części cienia pod wypełnione ścieżki i dlatego część cienia nie będzie widoczna.

O cieniowanych pociągnięciach

Podczas cieniowania obrysu zarówno wnętrze, jak i strona zewnętrzna obrysu są zacienione. Cień jest najciemniejszy na obrysie i rozjaśnia się, gdy cień rozciąga się na zewnątrz w obu kierunkach od obrysu.

Wyłączanie cieniowania po zakończeniu

Po narysowaniu cieni możesz wyłączyć cienie, aby narysować więcej ścieżek. Aby wyłączyć cieniowanie, ustaw shadowColor na przezroczysty.

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

Uwagi dotyczące wydajności

Cienie (podobnie jak gradienty) wymagają obszernych obliczeń, dlatego cieni należy używać oszczędnie.

Zachowaj szczególną ostrożność podczas animacji, ponieważ rysowanie cieni wiele razy na sekundę znacznie wpłynie na wydajność. Obejściem, które wymaga animacji cieniowanych ścieżek, jest wstępne utworzenie cieniowanej ścieżki na drugim „płótnie-cieniu”. Płótno-cień to normalne płótno, które jest tworzone w pamięci za pomocą document.createElement - nie jest dodawane do DOM (jest tylko płótnem pomostowym). Następnie narysuj płótno-cień na głównym płótnie. Jest to o wiele szybsze, ponieważ obliczenia cieni nie muszą być wykonywane wiele razy na sekundę. Wszystko, co robisz, to kopiowanie jednego gotowego płótna na widoczne płótno.

<!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 (tworzy obiekt stylu ścieżki)

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]

Tworzy gradient liniowy wielokrotnego użytku (obiekt).

Obiekt można przypisać do dowolnego strokeStyle i / lub fillStyle .

Następnie stroke () lub fill () pokoloruje ścieżkę kolorami gradientu obiektu.

Tworzenie obiektu gradientowego jest procesem dwuetapowym:

1. Utwórz sam obiekt gradientowy. Podczas tworzenia definiujesz linię na kanwie, w której gradient zaczyna się i kończy. Obiekt gradientu jest tworzony za pomocą var gradient = context.createLinearGradient .
2. Następnie dodaj 2 (lub więcej) kolorów, które składają się na gradient. Odbywa się to poprzez dodanie wielu punktów przejścia koloru do obiektu gradient.addColorStop pomocą gradient.addColorStop .

Argumenty:

• startX, startY to współrzędna obszaru roboczego, od której zaczyna się gradient. W punkcie początkowym (i wcześniej) płótno ma jednolity kolor najniższego gradientPercentPosition .

• endX, endY to współrzędna obszaru roboczego, na której kończy się gradient. W punkcie końcowym (i po) płótno ma jednolity kolor najwyższego gradientPercentPosition .

• gradientPercentPosition to liczba zmiennoprzecinkowa między 0,00 a 1,00 przypisana do punktu zatrzymania koloru. Zasadniczo jest to procentowy punkt drogi wzdłuż linii, w której ma zastosowanie ten określony kolor.

  • Gradient zaczyna się od wartości 0,00, czyli [startX, startY] na płótnie.
  • Gradient kończy się na wartości procentowej 1,00, czyli [endX, endY] na płótnie.
  • Uwaga techniczna: Termin „procent” nie jest poprawny technicznie, ponieważ wartości wynoszą od 0,00 do 1,00 zamiast 0% do 100%.

• CssColor jest kolorem CSS przypisanym do tego określonego koloru.

Obiekt gradientowy to obiekt, którego można użyć (i użyć ponownie!), Aby obrysy ścieżki i wypełnienia stały się kolorowe.

Uwaga boczna: Obiekt gradientu nie jest wewnętrzny elementu Canvas ani nie jest kontekstem. Jest to oddzielny obiekt JavaScript wielokrotnego użytku, który można przypisać do dowolnej ścieżki. Możesz nawet użyć tego obiektu do pokolorowania ścieżki na innym elemencie Canvas (!)

Punkty zatrzymania koloru to (procentowe) punkty drogi wzdłuż linii gradientu. W każdym punkcie końcowym zatrzymania koloru gradient jest w pełni (== nieprzezroczysty) pokolorowany przypisanym kolorem. Punkty pośrednie wzdłuż linii gradientu między punktami zatrzymania kolorów są pokolorowane jako gradienty tego i poprzedniego koloru.

Ważna wskazówka na temat gradientów na płótnie!

Podczas tworzenia obiektu gradientowego całe płótno jest „niewidocznie” wypełnione tym gradientem.

Kiedy stroke() lub fill() ścieżkę, niewidzialny gradient jest ujawniany, ale tylko nad tą ścieżką jest głaskany lub wypełniony.

1. Jeśli utworzysz liniowy gradient od czerwonego do magenty w następujący sposób:

    // 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. Następnie Canvas „niewidocznie” zobaczy twoją kreację gradientu w następujący sposób:

3. Ale dopóki nie stroke() lub nie fill() gradientu, nie zobaczysz żadnego gradientu na kanwie.

4. Na koniec, jeśli obrysujesz lub wypełnisz ścieżkę za pomocą gradientu, gradient „niewidoczny” stanie się widoczny na Płótnie ... ale tylko tam, gdzie jest narysowana ścieżka.

<!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 (tworzy obiekt stylu ścieżki)

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]

Tworzy gradient promieniowy wielokrotnego użytku (obiekt). Obiekt gradientowy to obiekt, którego można użyć (i użyć ponownie!), Aby obrysy ścieżki i wypełnienia stały się kolorowe.

O...

Gradient promieniowy płótna bardzo różni się od tradycyjnych gradientów promieniowych.

„Oficjalna” (prawie nieczytelna!) Definicja gradientu radialnego Canvas znajduje się na dole tego ogłoszenia. Nie patrz na to, jeśli masz słabe usposobienie !!

W (prawie zrozumiałym) znaczeniu:

• Gradient promieniowy ma 2 koła: okrąg „rzutujący” i okrąg „pokazowy”.
• Krąg rzutowania rzuca światło na koło wyświetlacza.
• To światło jest gradientem.
• Kształt tego światła gradientowego zależy od względnego rozmiaru i położenia obu okręgów.

Tworzenie obiektu gradientowego jest procesem dwuetapowym:

1. Utwórz sam obiekt gradientowy. Podczas tworzenia definiujesz linię na kanwie, w której gradient zaczyna się i kończy. Obiekt gradientu jest tworzony za pomocą var gradient = context.radialLinearGradient .
2. Następnie dodaj 2 (lub więcej) kolorów, które składają się na gradient. Odbywa się to poprzez dodanie wielu punktów przejścia koloru do obiektu gradient.addColorStop pomocą gradient.addColorStop .

Argumenty:

• środek X1, środek Y1, promień 1 określa pierwszy okrąg, w którym będzie wyświetlany gradient.

• centerX2, centerY2, radius2 definiuje drugie koło, które rzuca światło gradientowe na pierwsze koło.

• gradientPercentPosition to liczba zmiennoprzecinkowa między 0,00 a 1,00 przypisana do punktu zatrzymania koloru. Jest to w zasadzie procentowy punkt drogi określający, gdzie ten konkretny punkt koloru ma zastosowanie wzdłuż gradientu.

  • Gradient zaczyna się od wartości 0,00.
  • Gradient kończy się na wartości procentowej 1,00.
  • Uwaga techniczna: Termin „procent” nie jest poprawny technicznie, ponieważ wartości wynoszą od 0,00 do 1,00 zamiast 0% do 100%.

• CssColor jest kolorem CSS przypisanym do tego określonego koloru.

Uwaga boczna: Obiekt gradientu nie jest wewnętrzny elementu Canvas ani nie jest kontekstem. Jest to oddzielny obiekt JavaScript wielokrotnego użytku, który można przypisać do dowolnej ścieżki. Możesz nawet użyć tego obiektu do pokolorowania ścieżki na innym elemencie Canvas (!)

Punkty zatrzymania koloru to (procentowe) punkty drogi wzdłuż linii gradientu. W każdym punkcie końcowym zatrzymania koloru gradient jest w pełni (== nieprzezroczysty) pokolorowany przypisanym kolorem. Punkty pośrednie wzdłuż linii gradientu między punktami zatrzymania kolorów są pokolorowane jako gradienty tego i poprzedniego koloru.

Ważna wskazówka na temat gradientów na płótnie!

Kiedy tworzysz obiekt gradientu, cały gradient promieniowy jest „niewidocznie” rzucany na płótno.

Kiedy stroke() lub fill() ścieżkę, niewidzialny gradient jest ujawniany, ale tylko nad tą ścieżką jest głaskany lub wypełniony.

1. Jeśli utworzysz zielony radialny gradient w następujący sposób:

    // 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. Następnie Canvas „niewidocznie” zobaczy twoją kreację gradientu w następujący sposób:

3. Ale dopóki nie stroke() lub nie fill() gradientu, nie zobaczysz żadnego gradientu na kanwie.

4. Na koniec, jeśli obrysujesz lub wypełnisz ścieżkę za pomocą gradientu, gradient „niewidoczny” stanie się widoczny na Płótnie ... ale tylko tam, gdzie jest narysowana ścieżka.

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

Straszne oficjalne szczegóły

Kto decyduje, co robi `createRadialGradient?

W3C wydaje oficjalne zalecane specyfikacje, których przeglądarki używają do zbudowania elementu Canvas HTML.

Specyfikacja W3C dla createRadialGradient brzmi kryptycznie:

Co tworzy createRadialGradient

createRadialGradient … skutecznie tworzy stożek, dotknięty dwoma okręgami zdefiniowanymi podczas tworzenia gradientu, z częścią stożka przed okręgiem początkowym (0.0) przy użyciu koloru pierwszego przesunięcia, części stożka za końcowym okręgiem (1.0) przy użyciu koloru ostatniego przesunięcia oraz obszarów poza stożkiem nietkniętych przez gradient (przezroczysta czerń).

Jak to działa wewnętrznie

Metoda createRadialGradient(x0, y0, r0, x1, y1, r1) przyjmuje sześć argumentów, pierwsze trzy reprezentują okrąg początkowy z początkiem (x0, y0) i promieniem r0, a ostatnie trzy reprezentują końcowy okrąg z początkiem (x1 , y1) i promień r1. Wartości są w jednostkach przestrzeni współrzędnych. Jeśli jeden z r0 lub r1 jest ujemny, należy zgłosić wyjątek IndexSizeError. W przeciwnym razie metoda musi zwrócić promieniowy CanvasGradient zainicjowany dwoma określonymi okręgami.

Gradienty promieniowe należy renderować, wykonując następujące kroki:

1. Jeśli x0 = x1 i y0 = y1 i r0 = r1, wówczas gradient promieniowy nie może niczego namalować. Przerwij te kroki.
2. Niech x (ω) = (x1-x0) ω + x0; Niech y (ω) = (y1-y0) ω + y0; Niech r (ω) = (r1-r0) ω + r0 Niech kolor w ω będzie kolorem w tej pozycji na gradiencie (z kolorami pochodzącymi z interpolacji i ekstrapolacji opisanymi powyżej).
3. Dla wszystkich wartości ω, gdzie r (ω)> 0, zaczynając od wartości ω najbliższej dodatniej nieskończoności i kończąc na wartości ω najbliższej ujemnej nieskończoności, narysuj obwód okręgu o promieniu r (ω) w pozycji ( x (ω), y (ω)), z kolorem w ω, ale malowanie tylko na częściach płótna, które nie zostały jeszcze namalowane przez wcześniejsze koła na tym etapie w celu renderowania gradientu.

createPattern (tworzy obiekt stylu ścieżki)

var pattern = createPattern(imageObject,repeat)

Tworzy wzór wielokrotnego użytku (obiekt).

Obiekt można przypisać do dowolnego strokeStyle i / lub fillStyle .

Następnie stroke () lub fill () pomalują ścieżkę wzorem obiektu.

Argumenty:

• imageObject to obraz, który zostanie użyty jako wzór. Źródłem obrazu może być:

  • HTMLImageElement --- element img lub nowy Image (),
  • HTMLCanvasElement --- element canvas,
  • HTMLVideoElement --- element wideo (pobierze bieżącą ramkę wideo)
  • ImageBitmap,
  • Kropelka.

• Powtórz określa, w jaki sposób imageObject będzie powtarzany na kanwie (podobnie jak tło CSS). Ten argument musi być cytowany, a prawidłowe wartości to:

  • „powtórz” --- wzór wypełni płótno poziomo i pionowo
  • „repeat-x” --- wzór będzie powtarzany tylko w poziomie (1 rząd poziomy)
  • „repeat-y” --- wzór będzie powtarzany tylko w pionie (1 rząd pionowy)
  • „powtórz brak” --- wzór pojawia się tylko raz (w lewym górnym rogu)

Obiekt wzorca jest obiektem, którego można użyć (i użyć ponownie!), Aby pociągnięcia i wypełnienia ścieżki były wzorowane.

Uwaga boczna: Obiekt wzoru nie jest wewnętrzny elementu Canvas ani nie jest kontekstem. Jest to oddzielny obiekt JavaScript wielokrotnego użytku, który można przypisać do dowolnej ścieżki. Możesz nawet użyć tego obiektu, aby zastosować wzór do ścieżki na innym elemencie Canvas (!)

Ważna wskazówka na temat wzorów na płótnie!

Kiedy tworzysz obiekt wzoru, całe płótno jest „niewidocznie” wypełnione tym wzorem (podlega repeat ).

Kiedy stroke() lub fill() ścieżkę, niewidzialny wzór zostaje ujawniony, ale ujawniony tylko nad tą ścieżką jest głaskany lub wypełniony.

1. Zacznij od obrazu, którego chcesz użyć jako wzorca. Ważne (!): Upewnij się, że obraz został w pełni załadowany (przy użyciu patternimage.onload ), zanim spróbujesz go użyć do utworzenia wzoru.

2. Tworzysz taki wzór:

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

3. Wtedy Canvas „niewidocznie” zobaczy twoją kreację w następujący sposób:

4. Ale dopóki nie stroke() lub nie fill() wzoru, na płótnie nie zobaczysz żadnego wzoru.

5. Wreszcie, jeśli obrysujesz lub wypełnisz ścieżkę za pomocą wzoru, „niewidoczny” wzór stanie się widoczny na Płótnie ... ale tylko tam, gdzie jest narysowana ścieżka.

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

obrys (polecenie ścieżki)

context.stroke()

Powoduje obrysowanie ścieżki zgodnie z bieżącym context.strokeStyle a obrysowana ścieżka jest wizualnie rysowana na kanwie.

Przed wykonaniem context.stroke (lub context.fill ) ścieżka istnieje w pamięci i nie jest jeszcze rysowana wizualnie na kanwie.

Rysowane są nietypowe pociągnięcia

Rozważ ten przykład Ścieżka, która rysuje 1-pikselową czarną linię od [0,5] do [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();

Pytanie: Co przeglądarka faktycznie rysuje na płótnie?

Prawdopodobnie spodziewasz się uzyskać 6 czarnych pikseli na y = 5

Ale (!) ... Płótno zawsze rysuje pociągnięcia w połowie drogi po obu stronach zdefiniowanej ścieżki!

Ponieważ linia jest zdefiniowana na y==5.0 Canvas chce narysować linię między y==4.5 y==5.5

Ale znowu (!) ... Wyświetlacz komputera nie może rysować pół pikseli!

Co zatem należy zrobić z niepożądanymi półpikselami (pokazanymi na niebiesko poniżej)?

Odpowiedź jest taka, że Canvas faktycznie nakazuje wyświetlaczowi narysowanie linii o szerokości 2 pikseli od 4.0 do 6.0 . Koloruje również linię jaśniej niż zdefiniowana black . To dziwne zachowanie podczas rysowania jest „wygładzaniem” i pomaga Canvasowi unikać pociągnięć rysunkowych, które wyglądają na poszarpane.

Trik dostosowujący, który działa TYLKO dla pociągnięć dokładnie w poziomie i pionie

Możesz uzyskać stałą czarną linię o wielkości 1 piksela, określając linię, która ma być narysowana na półpikselu:

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

Przykładowy kod za pomocą context.stroke() do narysowania obrysowanej ścieżki na kanwie:

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

fill (polecenie ścieżki)

context.fill()

Powoduje, że wnętrze ścieżki jest wypełniane zgodnie z bieżącym context.fillStyle a wypełniona ścieżka jest wizualnie rysowana na kanwie.

Przed wykonaniem context.fill (lub context.stroke ) Ścieżka istnieje w pamięci i nie jest jeszcze rysowana wizualnie na kanwie.

Przykładowy kod za pomocą context.fill() aby narysować wypełnioną ścieżkę na kanwie:

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

klip (polecenie ścieżki)

context.clip

Ogranicza wyświetlanie przyszłych rysunków tylko w bieżącej ścieżce.

Przykład: Przytnij ten obraz do trójkątnej ścieżki

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