html5-canvas => Pfad (nur Syntax)

Syntax

context.beginPath ()
context.moveTo (startX, startY)
context.lineTo (endX, endY)
context.arc (centerX, centerY, radius, StartingRadianAngle, EndedRadianAngle)
context.quadraticCurveTo (controlX, controlY, endX, endY)
context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, endX, endY)
context.arcTo (Punkt X1, Punkt Y1, Punkt X2, Punkt Y2, Radius)
context.rect (leftX, topY, width, height);
context.closePath ()

Überblick über die grundlegenden Befehle zum Zeichnen von Pfaden: Linien und Kurven

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

TODO: Verknüpfen Sie die einzelnen Zeichenbefehle mit den einzelnen Beispielen. Ich weiß nicht, wie ich das machen soll, da die Links zu den einzelnen Beispielen auf den Ordner "draft" zeigen.

TODO: Fügen Sie Beispiele für diese Pfad "action" -Befehle hinzu: stroke (), fill (), clip ()

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

Pfad

Ein Pfad definiert eine Reihe von Linien und Kurven, die auf der Leinwand sichtbar gezeichnet werden können.

Ein Pfad wird nicht automatisch auf der Leinwand gezeichnet. Die Linien und Kurven des Pfads können jedoch mit einem anpassbaren Strich auf die Leinwand gezeichnet werden. Die durch die Linien und Kurven erzeugte Form kann auch mit einer ansprechbaren Füllung gefüllt werden.

Pfade werden nicht nur auf der Leinwand gezeichnet:

Klicken Sie auf Testen, ob sich eine XY-Koordinate innerhalb der Pfadform befindet.
Definieren eines Beschneidungsbereichs, in dem nur Zeichnungen innerhalb des Beschneidungsbereichs sichtbar sind. Zeichnungen außerhalb des Beschneidungsbereichs werden nicht gezeichnet (== transparent) - ähnlich dem CSS-Überlauf.

Die grundlegenden Befehle zum Zeichnen von Pfaden sind:

beginPath
ziehen nach
lineTo
Bogen
quadratischKurveTo
bezierCurveTo
arcTo
Rect
closePath

Beschreibung der grundlegenden Zeichenbefehle:

beginPath

context.beginPath()

Beginnt mit dem Zusammenstellen eines neuen Satzes von Pfadbefehlen und verwirft auch jeden zuvor zusammengestellten Pfad.

Das Verwerfen ist ein wichtiger und oft übersehener Punkt. Wenn Sie keinen neuen Pfad beginnen, werden alle zuvor ausgegebenen Pfadbefehle automatisch neu gezeichnet.

Außerdem wird der Zeichenstift in den oberen linken Ursprung der Leinwand verschoben (==-Koordinate [0,0]).

ziehen nach

context.moveTo(startX, startY)

Verschiebt die aktuelle Stiftposition in die Koordinate [startX, startY].

Standardmäßig sind alle Pfadzeichnungen miteinander verbunden. Der Endpunkt einer Linie oder Kurve ist also der Startpunkt der nächsten Linie oder Kurve. Dies kann dazu führen, dass eine unerwartete Linie zwischen zwei benachbarten Zeichnungen gezeichnet wird. Der Befehl context.moveTo nimmt den Zeichenstift im Wesentlichen auf und context.moveTo ihn an einer neuen Koordinate, sodass die automatische Verbindungslinie nicht gezeichnet wird.

lineTo

context.lineTo(endX, endY)

Zeichnet ein Liniensegment von der aktuellen Stiftposition zur Koordinierung [endX, endY]

Sie können mehrere .lineTo Befehle zum Zeichnen einer Polylinie zusammenstellen. Sie können beispielsweise drei Liniensegmente zu einem Dreieck zusammenstellen.

Bogen

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

Zeichnet einen Kreisbogen mit einem Mittelpunkt, einem Radius sowie Start- und Endwinkeln. Die Winkel werden als Bogenmaß ausgedrückt. Um Grad in Radiant zu konvertieren, können Sie diese Formel verwenden: radians = degrees * Math.PI / 180; .

Winkel 0 zeigt direkt nach rechts vom Mittelpunkt des Bogens. Um einen vollständigen Kreis zu zeichnen, können Sie endsAngle = startingAngle + 360 Grad (360 Grad == Math.PI 2) erstellen: `context.arc (10,10,20,0, Math.PI 2);

Standardmäßig wird der Bogen im Uhrzeigersinn gezeichnet. Ein optionaler Parameter [true | false] weist den Bogen an, gegen den Uhrzeigersinn gezeichnet zu werden: context.arc(10,10,20,0,Math.PI*2,true)

quadratischKurveTo

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

Zeichnet eine quadratische Kurve von der aktuellen Stiftposition bis zu einer bestimmten Endkoordinate. Eine andere gegebene Kontrollkoordinate bestimmt die Form (Kurvigkeit) der Kurve.

bezierCurveTo

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

Zeichnet eine kubische Bezier-Kurve von der aktuellen Stiftposition bis zu einer bestimmten Endkoordinate. Weitere zwei gegebene Kontrollkoordinaten bestimmen die Form (Kurven) der Kurve.

arcTo

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

Zeichnet einen Kreisbogen mit einem bestimmten Radius. Der Bogen wird im Uhrzeigersinn in den Keil gezogen, der durch die aktuelle Stiftposition gebildet wird, und gibt zwei Punkte an: Punkt 1 und Punkt 2.

Eine Linie, die die aktuelle Stiftposition und den Anfang des Bogens verbindet, wird automatisch vor dem Bogen gezeichnet.

Rect

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

Zeichnet ein Rechteck mit einer oberen linken Ecke und einer Breite und Höhe.

Das context.rect ist ein eindeutiger Zeichenbefehl, da es nicht verbundene Rechtecke hinzufügt. Diese getrennten Rechtecke werden nicht automatisch durch Linien verbunden.

closePath

context.closePath()

Zeichnet eine Linie von der aktuellen Stiftposition zurück zur Anfangskoordinate.

Wenn Sie beispielsweise zwei Linien zeichnen, die zwei closePath eines Dreiecks bilden, closePath das Dreieck, indem Sie den dritten closePath des Dreiecks vom Endpunkt des zweiten Zweigs zum Startpunkt des ersten closePath .

Der Name dieses Befehls führt oft dazu, dass er missverstanden wird. context.closePath ist KEIN Endzeichen für context.beginPath . Wieder schließt der Befehl closePath eine Linie - es schließt einen beginPath .

lineTo (ein Pfadbefehl)

context.lineTo(endX, endY)

Zeichnet ein Liniensegment von der aktuellen Stiftposition zur Koordinierung [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>

Sie können mehrere .lineTo-Befehle zum Zeichnen einer Polylinie zusammenstellen. Sie können beispielsweise drei Liniensegmente zu einem Dreieck zusammenstellen.

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

Bogen (ein Pfadbefehl)

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

Winkel 0 zeigt direkt nach rechts vom Mittelpunkt des Bogens.

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

Um einen vollständigen Kreis zu zeichnen, können Sie endsAngle = StartingAngle + 360 Grad (360 Grad == Math.PI2) erstellen.

<!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 (ein Pfadbefehl)

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

Zeichnet eine quadratische Kurve von der aktuellen Stiftposition bis zu einer bestimmten Endkoordinate. Eine andere gegebene Kontrollkoordinate bestimmt die Form (Kurvigkeit) der Kurve.

<!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 (ein Pfadbefehl)

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

Zeichnet eine kubische Bezier-Kurve von der aktuellen Stiftposition bis zu einer bestimmten Endkoordinate. Weitere zwei gegebene Kontrollkoordinaten bestimmen die Form (Kurven) der Kurve.

<!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 (ein Pfadbefehl)

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

Eine Linie, die die aktuelle Stiftposition und den Anfang des Bogens verbindet, wird automatisch vor dem Bogen gezeichnet.

<!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 (ein Pfadbefehl)

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

Zeichnet ein Rechteck mit einer oberen linken Ecke und einer Breite und Höhe.

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

Das context.rect ist ein eindeutiger Zeichenbefehl, da es nicht verbundene Rechtecke hinzufügt.

Diese getrennten Rechtecke werden nicht automatisch durch Linien verbunden.

<!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 (ein Pfadbefehl)

context.closePath()

Zeichnet eine Linie von der aktuellen Stiftposition zurück zur Anfangskoordinate.

Wenn Sie beispielsweise zwei Linien zeichnen, die zwei Zweige eines Dreiecks bilden, schließt closePath das Dreieck, indem Sie den dritten Zweig des Dreiecks vom Endpunkt des zweiten Zweigs zum Startpunkt des ersten Zweigs ziehen.

Ein Missverständnis erklärt!

Der Name dieses Befehls führt oft dazu, dass er missverstanden wird.

context.closePath ist KEIN Endzeichen für context.beginPath .

Wieder schließt der Befehl closePath eine Linie - es schließt einen beginPath nicht.

Dieses Beispiel zeichnet zwei Beine eines Dreiecks und verwendet closePath , um das Dreieck zu vervollständigen (schließen ?!), indem das dritte Bein gezeichnet wird. Was closePath tatsächlich macht, ist das Ziehen einer Linie vom Endpunkt der zweiten Etappe zurück zum Startpunkt der ersten Etappe.

<!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 (ein Pfadbefehl)

context.beginPath()

Beginnt mit dem Zusammenstellen eines neuen Satzes von Pfadbefehlen und verwirft auch jeden zuvor zusammengestellten Pfad.

Außerdem wird der Zeichenstift in den oberen linken Ursprung der Leinwand verschoben (==-Koordinate [0,0]).

Obwohl optional, sollten Sie beginPath einen Pfad mit beginPath

Das Verwerfen ist ein wichtiger und oft übersehener Punkt. Wenn Sie keinen neuen Pfad mit beginPath , werden alle zuvor ausgegebenen beginPath automatisch neu gezeichnet.

Diese beiden Demos versuchen beide, ein "X" mit einem roten und einem blauen Strich zu zeichnen.

In dieser ersten Demo wird beginPath korrekt verwendet, um den zweiten roten Strich zu starten. Das Ergebnis ist, dass das "X" sowohl einen roten als auch einen blauen Strich enthält.

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

Diese zweite Demo lässt beginPath beim zweiten Strich falsch aus. Das Ergebnis ist, dass das "X" falsch beide rote Striche hat.

Der zweite stroke() zeichnet den zweiten roten Strich.

Aber ohne eine zweite beginPath , dass gleicher zweiter stroke() auch neu gezeichnet fälschlicherweise den ersten Schlaganfall.

Da der zweite stroke() jetzt als rot dargestellt wird, wird der erste blaue Strich durch einen falsch farbigen roten Strich überschrieben .

<!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 (ein Pfadstilattribut)

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

Legt den Kappenstil der Anfangs- und Endpunkte der Linie fest.

butt , der Standardstil von lineCap, zeigt quadratische Kappen, die nicht über den Anfangs- und Endpunkt der Linie hinausragen.
round zeigt abgerundete Kappen, die über den Anfangs- und Endpunkt der Linie hinausragen.
Quadrat zeigt quadratische Kappen, die über den Anfangs- und Endpunkt der Linie hinausragen.

<!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 (ein Pfadstilattribut)

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

Legt den Stil fest, der zum Verbinden benachbarter Liniensegmente verwendet wird.

Gehrung , die Standardeinstellung, verbindet Liniensegmente mit einer scharfen Verbindung.
rund , verbindet Liniensegmente mit abgerundeten Fugen.
Schräge , verbindet Liniensegmente mit abgestumpfter Fuge.

<!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 (ein Pfadstilattribut)

context.strokeStyle=color

Legt die Farbe fest, mit der die Kontur des aktuellen Pfads gezeichnet wird.

Dies sind color (diese müssen angegeben werden):

Eine CSS-benannte Farbe , zum Beispiel context.strokeStyle='red'
Eine context.strokeStyle='#FF0000' , zum Beispiel context.strokeStyle='#FF0000'
Eine RGB-Farbe , z. B. context.strokeStyle='rgb(red,green,blue)' wobei rot, grün und blau ganze Zahlen von context.strokeStyle='rgb(red,green,blue)' sind, die die Stärke jeder Komponentenfarbe angeben.
Eine HSL-Farbe , zum Beispiel context.strokeStyle='hsl(hue,saturation,lightness)' wobei Farbton eine ganze Zahl von 0 bis 360 auf dem Farbkreis ist und Sättigung und Helligkeit Prozentwerte (0-100%) sind, die die Stärke jeder Komponente angeben .
Eine HSLA-Farbe , zum Beispiel context.strokeStyle='hsl(hue,saturation,lightness,alpha)' wobei Farbton eine ganze Zahl von 0 bis 360 auf dem Farbkreis ist und Sättigung und Helligkeit sind Prozentwerte (0-100%), die die Stärke von angeben Jede Komponente und jedes Alpha ist ein Dezimalwert von 0,00-1,00, der die Deckkraft angibt.

Sie können auch diese Farboptionen angeben (diese Optionen sind Objekte, die vom Kontext erstellt werden):

Ein linearer Verlauf, bei dem es sich um ein lineares Verlaufsobjekt handelt, das mit context.createLinearGradient
Ein radialer Farbverlauf, bei dem es sich um ein radiales Verlaufsobjekt handelt, das mit context.createRadialGradient
Ein Muster, bei dem es sich um ein context.createPattern das mit 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 (ein Pfadstilattribut)

context.fillStyle=color

Legt die Farbe fest, mit der das Innere des aktuellen Pfads gefüllt wird.

Dies sind Farboptionen (diese müssen angegeben werden):

Eine CSS-benannte Farbe , zum Beispiel context.fillStyle='red'
Eine Hex-Farbe , zum Beispiel context.fillStyle='#FF0000'
Eine RGB-Farbe , z. B. context.fillStyle='rgb(red,green,blue)' wobei rot, grün und blau ganze Zahlen von context.fillStyle='rgb(red,green,blue)' sind, die die Stärke jeder Komponentenfarbe angeben.
Eine HSL-Farbe , z. B. context.fillStyle='hsl(hue,saturation,lightness)' wobei Farbton eine ganze Zahl von 0 bis 360 auf dem Farbkreis ist und Sättigung und Helligkeit Prozentsätze (0-100%) sind, die die Stärke jeder Komponente angeben .
Eine HSLA-Farbe , z. B. context.fillStyle='hsl(hue,saturation,lightness,alpha)' wobei Farbton eine ganze Zahl von 0 bis 360 im Farbkreis ist und Sättigung und Helligkeit sind Prozentwerte (0-100%), die die Stärke von angeben Jede Komponente und jedes Alpha ist ein Dezimalwert von 0,00-1,00, der die Deckkraft angibt.

Sie können auch diese Farboptionen angeben (diese Optionen sind Objekte, die vom Kontext erstellt werden):

Ein linearer Verlauf, bei dem es sich um ein lineares Verlaufsobjekt handelt, das mit context.createLinearGradient

Ein radialer Farbverlauf, bei dem es sich um ein radiales Verlaufsobjekt handelt, das mit context.createRadialGradient

Ein Muster, bei dem es sich um ein context.createPattern das mit 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 (Ein Pfadattribut)

context.lineWidth=lineWidth

Legt die Breite der Linie fest, die den Umriss des Pfads streichen soll

<!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 (Pfadstilattribute)

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

Dieser Satz von Attributen fügt einen Pfad um einen Pfad hinzu.

Sowohl ausgefüllte als auch gestrichene Pfade können einen Schatten haben.

Der Schatten ist am Pfadrand am dunkelsten (undurchsichtig) und wird mit zunehmender Entfernung vom Pfadrand graduell heller.

shadowColor gibt an, welche CSS-Farbe zum Erzeugen des Schattens verwendet wird.
shadowBlur ist die Entfernung, über die sich der Schatten vom Pfad nach außen erstreckt.
shadowOffsetX ist eine Entfernung, um die der Schatten horizontal vom Pfad weg verschoben wird. Eine positive Entfernung bewegt den Schatten nach rechts, eine negative Entfernung bewegt den Schatten nach links.
shadowOffsetY ist eine Entfernung, um die der Schatten vertikal vom Pfad weg verschoben wird. Eine positive Entfernung bewegt den Schatten nach unten, eine negative Entfernung den Schatten nach oben.

Über shadowOffsetX und shadowOffsetY

Es ist wichtig zu wissen, dass der gesamte Schatten in seiner Gesamtheit verschoben ist . Dadurch wird ein Teil des Schattens unter gefüllten Pfaden verschoben, sodass ein Teil des Schattens nicht sichtbar ist.

Über Schattenstriche

Beim Abschatten eines Strichs werden sowohl die Innenseite als auch die Außenseite des Strichs abgeschattet. Der Schatten ist am Strich am dunkelsten und hellt sich auf, wenn sich der Schatten in beide Richtungen vom Strich nach außen erstreckt.

Deaktivieren Sie das Abschatten, wenn Sie fertig sind

Nachdem Sie Ihre Schatten gezeichnet haben, möchten Sie möglicherweise die Abschattung deaktivieren, um weitere Pfade zu zeichnen. Um das Shadowing auszuschalten, setzen Sie die shadowColor auf transparent.

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

Überlegungen zur Leistung

Schatten (wie Farbverläufe) erfordern umfangreiche Berechnungen. Daher sollten Sie Schatten sparsam verwenden.

Seien Sie beim Animieren besonders vorsichtig, da das Zeichnen von Schatten viele Male pro Sekunde die Leistung stark beeinflusst. Eine Problemumgehung, wenn Sie Schattenpfade animieren müssen, besteht darin, den Schattenpfad auf einem zweiten "Schattenbereich" vorab zu erstellen. Die Schatten-Leinwand ist eine normale Leinwand, die im Speicher mit document.createElement Sie wird nicht zum DOM hinzugefügt (es handelt sich lediglich um eine Staging-Leinwand). Zeichnen Sie dann die Schattenleinwand auf die Hauptleinwand. Dies ist viel schneller, da die Schattenberechnungen nicht viele Male pro Sekunde durchgeführt werden müssen. Alles, was Sie tun, ist das Kopieren einer vorgefertigten Leinwand auf Ihre sichtbare Leinwand.

<!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 (erstellt ein Pfadstilobjekt)

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]

Erzeugt einen wiederverwendbaren linearen Farbverlauf (Objekt).

Das Objekt kann einem beliebigen strokeStyle und / oder fillStyle .

Anschließend wird der Pfad mit den Farbverläufen des Objekts mit dem Strich () oder dem Fill () farbig dargestellt.

Das Erstellen eines Verlaufsobjekts erfolgt in zwei Schritten:

Erstellen Sie das Verlaufsobjekt selbst. Während der Erstellung definieren Sie eine Linie auf der Leinwand, in der der Verlauf beginnt und endet. Das Verlaufsobjekt wird mit var gradient = context.createLinearGradient .
Fügen Sie dann 2 (oder mehr) Farben hinzu, aus denen sich der Verlauf zusammensetzt. Dies geschieht durch Hinzufügen mehrerer Farbstopps zum Verlaufsobjekt mit gradient.addColorStop .

Argumente:

startX, startY ist die Leinwandkoordinate, an der der Farbverlauf beginnt. Am Startpunkt (und davor) ist die Leinwand durchgehend die Farbe des untersten gradientPercentPosition .
endX, endY ist die Leinwandkoordinate, an der der Verlauf endet. Am Endpunkt (und danach) entspricht die Leinwand der Farbe des höchsten gradientPercentPosition .
gradientPercentPosition ist eine Float-Zahl zwischen 0,00 und 1,00, die einem Farbstopp zugewiesen wird. Es ist im Wesentlichen ein prozentualer Wegpunkt entlang der Linie, an der dieser bestimmte Farbstopp gilt.
- Der Verlauf beginnt bei einem Prozentsatz von 0,00, der auf der Leinwand [startX, startY] ist.
- Der Farbverlauf endet bei einem Prozentsatz von 1,00, der auf der Leinwand [endX, endY] ist.
- Technischer Hinweis: Der Begriff "Prozent" ist technisch nicht korrekt, da die Werte von 0,00 bis 1,00 anstatt von 0% bis 100% reichen.
CssColor ist eine CSS-Farbe, die diesem bestimmten Stopp zugewiesen wird.

Das Verlaufsobjekt ist ein Objekt, das Sie verwenden können (und wiederverwenden können!), Um die Pfade und Füllungen des Pfads in einen Verlauf zu bringen.

Hinweis: Das Verlaufsobjekt befindet sich weder innerhalb des Canvas-Elements noch im Kontext. Es ist ein separates und wiederverwendbares JavaScript-Objekt, das Sie jedem beliebigen Pfad zuweisen können. Sie können dieses Objekt sogar verwenden, um einen Pfad auf einem anderen Canvas-Element zu färben (!).

Farbstopps sind (prozentuale) Wegpunkte entlang der Verlaufslinie. An jedem Farbstopp-Wegpunkt ist der Farbverlauf vollständig (= opak) mit der zugewiesenen Farbe gefärbt. Zwischenpunkte entlang der Verlaufslinie zwischen Farbstopps werden als Farbverläufe dieser und der vorherigen Farbe dargestellt.

Wichtiger Hinweis zu Canvas-Farbverläufen!

Wenn Sie ein Verlaufsobjekt erstellen, wird die gesamte Leinwand "unsichtbar" mit diesem Verlauf gefüllt.

Wenn Sie einen Pfad stroke() oder fill() , wird der unsichtbare Verlauf sichtbar, aber nur über den Pfad, der gestrichen oder gefüllt wird.

Wenn Sie einen linearen Rot-Magenta-Farbverlauf erstellen, gehen Sie wie folgt vor:

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

Dann wird Canvas "unsichtbar" Ihre Farbverlaufserstellung wie folgt sehen:

Bis Sie jedoch mit dem Farbverlauf stroke() oder fill() , wird auf dem Canvas kein Farbverlauf angezeigt.
Wenn Sie einen Pfad mit dem Farbverlauf streichen oder füllen, wird der "unsichtbare" Farbverlauf auf der Leinwand sichtbar ... aber nur dort, wo der Pfad gezeichnet wird.

<!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 (erstellt ein Pfadstilobjekt)

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]

Erzeugt einen wiederverwendbaren radialen Farbverlauf (Objekt). Das Verlaufsobjekt ist ein Objekt, das Sie verwenden können (und wiederverwenden können!), Um die Pfade und Füllungen des Pfads in einen Verlauf zu bringen.

Über...

Der Canvas-Radialgradient unterscheidet sich stark von herkömmlichen Radialgradienten.

Die "offizielle" (fast nicht zu entziffernde) Definition des radialen Verlaufs von Canvas befindet sich am Ende dieses Beitrags. Schau es dir nicht an, wenn du eine schwache Veranlagung hast !!

(Fast verständlich):

Der radiale Verlauf hat 2 Kreise: einen "Gieß" -Kreis und einen "Anzeige" -Kreis.
Der Gusskreis wirft Licht in den Anzeigekreis.
Das Licht ist der Farbverlauf.
Die Form dieses Gradientenlichts wird durch die relative Größe und Position beider Kreise bestimmt.

Das Erstellen eines Verlaufsobjekts erfolgt in zwei Schritten:

Erstellen Sie das Verlaufsobjekt selbst. Während der Erstellung definieren Sie eine Linie auf der Leinwand, in der der Verlauf beginnt und endet. Das Verlaufsobjekt wird mit var gradient = context.radialLinearGradient .
Fügen Sie dann 2 (oder mehr) Farben hinzu, aus denen sich der Verlauf zusammensetzt. Dies geschieht durch Hinzufügen mehrerer Farbstopps zum Verlaufsobjekt mit gradient.addColorStop .

Argumente:

centerX1, centerY1, radius1 definiert einen ersten Kreis, in dem der Gradient angezeigt wird.
centerX2, centerY2, radius2 definiert einen zweiten Kreis, der Gradientenlicht in den ersten Kreis wirft .
gradientPercentPosition ist eine Float-Zahl zwischen 0,00 und 1,00, die einem Farbstopp zugewiesen wird. Es ist im Wesentlichen ein prozentualer Wegpunkt, der bestimmt, wo dieser bestimmte Farbstopp entlang des Verlaufs gilt.
- Der Gradient beginnt bei 0,00%.
- Der Gradient endet bei einem Prozentsatz von 1,00.
- Technischer Hinweis: Der Begriff "Prozent" ist technisch nicht korrekt, da die Werte von 0,00 bis 1,00 anstatt von 0% bis 100% reichen.
CssColor ist eine CSS-Farbe, die diesem bestimmten Stopp zugewiesen wird.

Wichtiger Hinweis zu Canvas-Farbverläufen!

Wenn Sie ein Verlaufsobjekt erstellen, wird der gesamte radiale Verlauf "unsichtbar" auf die Leinwand geworfen.

Wenn Sie einen Pfad stroke() oder fill() , wird der unsichtbare Verlauf sichtbar, aber nur über den Pfad, der gestrichen oder gefüllt wird.

Wenn Sie einen Radius von Grün nach Rot wie folgt erstellen:

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

Dann wird Canvas "unsichtbar" Ihre Farbverlaufserstellung wie folgt sehen:

Bis Sie jedoch mit dem Farbverlauf stroke() oder fill() , wird auf dem Canvas kein Farbverlauf angezeigt.
Wenn Sie einen Pfad mit dem Farbverlauf streichen oder füllen, wird der "unsichtbare" Farbverlauf auf der Leinwand sichtbar ... aber nur dort, wo der Pfad gezeichnet wird.

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

Die unheimlichen offiziellen Details

Wer entscheidet, was `createRadialGradient macht?

Das W3C gibt die offiziellen empfohlenen Spezifikationen heraus, die Browser zum Erstellen des Canvas-Elements Html5 verwenden.

Die W3C-Spezifikation für createRadialGradient liest sich createRadialGradient wie createRadialGradient :

Was erstellt createRadialGradient

createRadialGradient … erstellt effektiv einen Kegel, der von den beiden bei der Erstellung des Verlaufs definierten Kreisen berührt wird, wobei der Teil des Kegels vor dem Startkreis (0,0) die Farbe des ersten Versatzes verwendet, den Teil des Kegels nach dem Endkreis (1.0) Verwenden Sie die Farbe des letzten Versatzes und Bereiche außerhalb des Kegels, die vom Verlauf nicht berührt werden (transparentes Schwarz).

Wie funktioniert es intern?

Die createRadialGradient(x0, y0, r0, x1, y1, r1) benötigt sechs Argumente, wobei die ersten drei den Startkreis mit Ursprung (x0, y0) und den Radius r0 und die letzten drei den Endkreis mit Ursprung (x1) darstellen , y1) und Radius r1. Die Werte sind in Koordinatenraumeinheiten angegeben. Wenn entweder r0 oder r1 negativ ist, muss eine IndexSizeError-Ausnahme ausgelöst werden. Andernfalls muss die Methode einen radialen CanvasGradient zurückgeben, der mit den beiden angegebenen Kreisen initialisiert wurde.
Radiale Farbverläufe müssen wie folgt gerendert werden:
Wenn x0 = x1 und y0 = y1 und r0 = r1 ist, darf der radiale Gradient nichts ausmachen. Brechen Sie diese Schritte ab.
Sei x (ω) = (x1-x0) ω + x0; Sei y (ω) = (y1-y0) ω + y0; Sei r (ω) = (r1-r0) ω + r0 Sei die Farbe bei ω die Farbe an dieser Stelle des Gradienten (wobei die Farben aus der oben beschriebenen Interpolation und Extrapolation stammen).
Zeichnen Sie für alle Werte von ω, bei denen r (ω)> 0 ist, beginnend mit dem Wert von ω, der dem positiven Unendlichen am nächsten liegt und mit dem Wert von ω, der dem negativen Unendlichen am nächsten liegt, den Umfang des Kreises mit dem Radius r (ω) an Position ( x (ω), y (ω)), wobei die Farbe bei ω liegt, jedoch nur die Teile der Leinwand gemalt werden, die von früheren Kreisen in diesem Schritt noch nicht für dieses Rendern des Farbverlaufs gezeichnet wurden.

createPattern (erstellt ein Pfadstylingobjekt)

var pattern = createPattern(imageObject,repeat)

Erzeugt ein wiederverwendbares Muster (Objekt).

Das Objekt kann einem beliebigen strokeStyle und / oder fillStyle .

Anschliessend zeichnen Strich () oder Füllen () den Pfad mit dem Muster des Objekts.

Argumente:

imageObject ist ein Bild, das als Muster verwendet wird. Die Quelle des Bildes kann sein:
- HTMLImageElement - ein img-Element oder ein neues Image (),
- HTMLCanvasElement --- ein Canvas-Element,
- HTMLVideoElement --- ein Videoelement (greift das aktuelle Video-Frame)
- ImageBitmap,
- Klecks.
repeat bestimmt, wie das imageObject auf der Leinwand wiederholt wird (ähnlich wie bei einem CSS-Hintergrund). Dieses Argument muss in Anführungszeichen gesetzt werden und gültige Werte sind:
- "repeat" --- Das Muster füllt die Leinwand horizontal und vertikal
- "repeat-x" --- das Muster wird nur horizontal wiederholt (1 horizontale Reihe)
- "repeat-y" --- das Muster wird nur vertikal wiederholt (1 vertikale Reihe)
- "repeat none" --- das Muster erscheint nur einmal (oben links)

Das Musterobjekt ist ein Objekt, das Sie verwenden können (und wiederverwenden können!), Um Ihre Pfadanschläge und Füllungen zu einem Muster zu machen.

Hinweis: Das Musterobjekt befindet sich weder innerhalb des Canvas-Elements noch im Kontext. Es ist ein separates und wiederverwendbares JavaScript-Objekt, das Sie jedem beliebigen Pfad zuweisen können. Sie können dieses Objekt sogar verwenden, um Muster auf einen Pfad eines anderen Canvas-Elements anzuwenden (!).

Wichtiger Hinweis zu Canvas-Mustern!

Wenn Sie ein Musterobjekt erstellen, wird die gesamte Leinwand "unsichtbar" mit diesem Muster gefüllt (vorbehaltlich des sich repeat Arguments).

Wenn Sie einen Pfad stroke() oder fill() , wird das unsichtbare Muster sichtbar, aber nur über den Pfad, der gestrichen oder gefüllt wird.

Beginnen Sie mit einem Bild, das Sie als Muster verwenden möchten. Wichtig (!): Stellen Sie sicher, dass Ihr Bild vollständig geladen ist (mithilfe von patternimage.onload ), bevor Sie versuchen, es zum Erstellen des Musters zu verwenden.

Sie erstellen ein Muster wie folgt:

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

Dann wird Canvas "unsichtbar" Ihre Mustererstellung wie folgt sehen:

Bis Sie jedoch mit dem Muster stroke() oder fill() , sehen Sie kein Muster auf der Leinwand.
Wenn Sie einen Pfad mit dem Muster streichen oder ausfüllen, wird das "unsichtbare" Muster auf der Leinwand sichtbar ... aber nur dort, wo der Pfad gezeichnet wird.

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

Strich (ein Pfadbefehl)

context.stroke()

Bewirkt, dass der Umfang des Pfads gemäß dem aktuellen context.strokeStyle gestrichen wird und der gestrichene Pfad visuell auf die Leinwand gezeichnet wird.

Vor der Ausführung von context.stroke (oder context.fill ) ist der Pfad im Speicher vorhanden und noch nicht visuell auf der Zeichenfläche gezeichnet.

Die ungewöhnliche Art, wie Striche gezeichnet werden

Betrachten Sie diesen Beispielpfad, der eine schwarze Linie mit einem Pixel von [0,5] bis [5,5] zeichnet:

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

Frage: Was zeichnet der Browser eigentlich auf der Leinwand?

Sie erwarten wahrscheinlich 6 schwarze Pixel bei y = 5

Aber (!) ... Canvas zeichnet Striche immer auf halbem Weg zu beiden Seiten des definierten Pfads!

Da die Linie bei y==5.0 definiert ist, möchte Canvas die Linie zwischen y==4.5 und y==5.5

Aber wieder (!) ... Der Computerbildschirm kann keine halben Pixel zeichnen!

Was ist also mit den unerwünschten halben Pixeln (unten blau dargestellt) zu tun?

Die Antwort ist, dass Canvas die Anzeige tatsächlich anweist, eine 2 Pixel breite Linie von 4.0 bis 6.0 zu zeichnen. Es färbt auch die Linie heller als das definierte black . Dieses merkwürdige Zeichenverhalten ist "Anti-Aliasing" und hilft Canvas, Zeichenstriche zu vermeiden, die gezackt aussehen.

Ein Einstell-Trick, der NUR für exakt horizontale und vertikale Schläge funktioniert

Sie können eine durchgehende schwarze Linie von 1 Pixel erhalten, indem Sie die Linie angeben, die auf dem halben Pixel gezeichnet werden soll:

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

Beispielcode, der context.stroke() um einen gestrichenen Pfad auf der Leinwand zu zeichnen:

<!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 (ein Pfadbefehl)

context.fill()

Bewirkt, dass das Innere des Pfads gemäß dem aktuellen context.fillStyle gefüllt wird und der gefüllte Pfad visuell auf die Leinwand gezeichnet wird.

Vor der Ausführung von context.fill (oder context.stroke ) ist der Pfad im Speicher vorhanden und noch nicht visuell auf der Zeichenfläche gezeichnet.

Beispielcode mit context.fill() zum Zeichnen eines gefüllten Pfads auf der Leinwand:

<!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 (ein Pfadbefehl)

context.clip

Beschränkt zukünftige Zeichnungen darauf, dass sie nur im aktuellen Pfad angezeigt werden.

Beispiel: Clip dieses Bild in einen dreieckigen Pfad

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

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

html5-canvas
Pfad (nur Syntax)

Suche…

Syntax

Überblick über die grundlegenden Befehle zum Zeichnen von Pfaden: Linien und Kurven

Beschreibung der grundlegenden Zeichenbefehle:

lineTo (ein Pfadbefehl)

Bogen (ein Pfadbefehl)

quadraticCurveTo (ein Pfadbefehl)

bezierCurveTo (ein Pfadbefehl)

arcTo (ein Pfadbefehl)

rect (ein Pfadbefehl)

closePath (ein Pfadbefehl)

beginPath (ein Pfadbefehl)

lineCap (ein Pfadstilattribut)

lineJoin (ein Pfadstilattribut)

strokeStyle (ein Pfadstilattribut)

fillStyle (ein Pfadstilattribut)

lineWidth (Ein Pfadattribut)

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (Pfadstilattribute)

createLinearGradient (erstellt ein Pfadstilobjekt)

createRadialGradient (erstellt ein Pfadstilobjekt)

Die unheimlichen offiziellen Details

createPattern (erstellt ein Pfadstylingobjekt)

Strich (ein Pfadbefehl)

Die ungewöhnliche Art, wie Striche gezeichnet werden

fill (ein Pfadbefehl)

clip (ein Pfadbefehl)