html5-canvas => Pad (alleen syntaxis)

Syntaxis

context.beginPath ()
context.moveTo (StartX, starty)
context.lineTo (eindeX, ENDY)
context.arc (centerX, centerY, straal, beginnendRadianAngle, eindigendRadianAngle)
context.quadraticCurveTo (controlX, controlY, eindeX, ENDY)
context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, eindeX, ENDY)
context.arcTo (puntX1, puntY1, puntX2, puntY2, straal)
context.rect (leftX, topY, breedte, hoogte);
context.closePath ()

Overzicht van de basisopdrachten voor padtekening: lijnen en curven

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

TODO: Koppel elk van de onderstaande tekenopdrachten aan hun individuele voorbeelden. Ik weet niet hoe ik dit moet doen, omdat de koppelingen naar de afzonderlijke voorbeelden naar de map 'concept' verwijzen.

TODO: voorbeelden toevoegen voor deze pad "actie" -opdrachten: streek (), opvulling (), clip ()

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

Pad

Een pad definieert een reeks lijnen en curven die zichtbaar op het canvas kunnen worden getekend.

Er wordt niet automatisch een pad op het canvas getekend. Maar de lijnen en curven van het pad kunnen op het canvas worden getekend met een stileerbare lijn. En de vorm gecreëerd door de lijnen en curven kan ook worden gevuld met een stileerbare vulling.

Paden hebben andere toepassingen dan tekenen op het canvas:

Druk op testen als een x, y-coördinaat zich binnen de padvorm bevindt.
Een knipgebied definiëren waarbij alleen tekeningen binnen het knipgebied zichtbaar zijn. Tekeningen buiten het knipgebied worden niet getekend (== transparant) - vergelijkbaar met CSS-overloop.

De basisopdrachten voor het tekenen van een pad zijn:

beginPath
moveTo
lineTo
boog
quadraticCurveTo
bezierCurveTo
Arctisch
rect
closePath

Beschrijving van de basistekenopdrachten:

beginPath

context.beginPath()

Begint met het samenstellen van een nieuwe set padopdrachten en verwijdert ook elk eerder samengesteld pad.

Het weggooien is een belangrijk en vaak over het hoofd gezien punt. Als u niet aan een nieuw pad begint, worden eerder uitgegeven padopdrachten automatisch opnieuw getekend.

Het verplaatst ook de tekening "pen" naar de linkerbovenhoek van het canvas (== coördinaat [0,0]).

moveTo

context.moveTo(startX, startY)

Verplaatst de huidige penlocatie naar de coördinaat [startX, startY].

Standaard zijn alle padtekeningen met elkaar verbonden. Het eindpunt van een lijn of curve is dus het startpunt van de volgende lijn of curve. Hierdoor kan een onverwachte lijn worden getrokken die twee aangrenzende tekeningen verbindt. Het commando context.moveTo "pakt in principe" de tekenpen op "en plaatst deze op een nieuwe coördinaat zodat de automatische verbindingslijn niet wordt getekend.

lineTo

context.lineTo(endX, endY)

Tekent een lijnsegment van de huidige penlocatie om te coördineren [endX, endY]

U kunt meerdere .lineTo opdrachten samenstellen om een polylijn te tekenen. U kunt bijvoorbeeld 3 lijnsegmenten samenstellen om een driehoek te vormen.

boog

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

Tekent een cirkelboog met een middelpunt, straal en begin- en eindhoeken. De hoeken worden uitgedrukt als radialen. Om graden naar radialen te converteren, kunt u deze formule gebruiken: radians = degrees * Math.PI / 180; .

Hoek 0 kijkt recht naar rechts vanuit het midden van de boog. Om een volledige cirkel te tekenen, kun je eindeAngle = startAngle + 360 graden (360 graden == Math.PI 2) maken: `context.arc (10,10,20,0, Math.PI 2);

Standaard wordt de boog met de klok mee getekend. Een optionele parameter [true | false] geeft de opdracht de boog tegen de klok in te tekenen: context.arc(10,10,20,0,Math.PI*2,true)

quadraticCurveTo

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

Tekent een kwadratische curve vanaf de huidige penlocatie naar een gegeven eindcoördinaat. Een andere gegeven besturingscoördinaat bepaalt de vorm (kromming) van de curve.

bezierCurveTo

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

Tekent een kubieke Bezier-curve die begint bij de huidige penlocatie naar een gegeven eindcoördinaat. Nog eens 2 gegeven coördinaten bepalen de vorm (kromming) van de curve.

Arctisch

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

Tekent een cirkelboog met een gegeven straal. De boog wordt met de klok mee getekend binnen de wig gevormd door de huidige penlocatie en krijgt twee punten: Punt1 & Punt2.

Voorafgaand aan de boog wordt automatisch een lijn getrokken die de huidige penlocatie en het begin van de boog verbindt.

rect

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

Tekent een rechthoek met een linkerbovenhoek en een breedte en hoogte.

De context.rect is een uniek tekencommando omdat het losgekoppelde rechthoeken toevoegt. Deze losgekoppelde rechthoeken worden niet automatisch verbonden door lijnen.

closePath

context.closePath()

Tekent een lijn vanaf de huidige penlocatie terug naar de beginpadcoördinaat.

Als u bijvoorbeeld 2 lijnen tekent die 2 benen van een driehoek vormen, zal closePath de driehoek "sluiten" door het derde been van de driehoek vanaf het eindpunt van het 2e been terug te trekken naar het beginpunt van het eerste been.

De naam van dit commando zorgt er vaak voor dat het verkeerd wordt begrepen. context.closePath is GEEN eindbegrenzing voor context.beginPath . Nogmaals, de opdracht closePath tekent een lijn - deze sluit een beginPath .

lineTo (een padopdracht)

context.lineTo(endX, endY)

Tekent een lijnsegment van de huidige penlocatie om te coördineren [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>

U kunt meerdere .lineTo-opdrachten samenstellen om een polylijn te tekenen. U kunt bijvoorbeeld 3 lijnsegmenten samenstellen om een driehoek te vormen.

<!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 (een padopdracht)

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

Hoek 0 kijkt recht naar rechts vanuit het midden van de boog.

Standaard wordt de boog met de klok mee getekend. Een optionele parameter [true | false] geeft de opdracht de boog tegen de klok in te tekenen: 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>

Om een complete cirkel te tekenen, kun je eindeAngle = startAngle + 360 graden (360 graden == Math.PI2) maken.

<!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 (een padopdracht)

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

Tekent een kwadratische curve vanaf de huidige penlocatie naar een gegeven eindcoördinaat. Een andere gegeven besturingscoördinaat bepaalt de vorm (kromming) van de curve.

<!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 (een padopdracht)

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

Tekent een kubieke Bezier-curve die begint bij de huidige penlocatie naar een gegeven eindcoördinaat. Nog eens 2 gegeven coördinaten bepalen de vorm (kromming) van de curve.

<!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 (een padopdracht)

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

Tekent een cirkelboog met een gegeven straal. De boog wordt met de klok mee getekend binnen de wig gevormd door de huidige penlocatie en krijgt twee punten: Punt1 & Punt2.

Voorafgaand aan de boog wordt automatisch een lijn getrokken die de huidige penlocatie en het begin van de boog verbindt.

<!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 (een padopdracht)

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

Tekent een rechthoek met een linkerbovenhoek en een breedte en hoogte.

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

De context.rect is een uniek tekencommando omdat het losgekoppelde rechthoeken toevoegt.

Deze losgekoppelde rechthoeken worden niet automatisch verbonden door lijnen.

<!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 (een padopdracht)

context.closePath()

Tekent een lijn vanaf de huidige penlocatie terug naar de beginpadcoördinaat.

Als u bijvoorbeeld 2 lijnen tekent die 2 benen van een driehoek vormen, zal closePath de driehoek "sluiten" door het derde been van de driehoek vanaf het eindpunt van het 2e been terug te trekken naar het beginpunt van het eerste been.

Een misvatting uitgelegd!

De naam van dit commando zorgt er vaak voor dat het verkeerd wordt begrepen.

context.closePath is GEEN eindbegrenzing voor context.beginPath .

Nogmaals, de opdracht closePath tekent een lijn - deze sluit een beginPath niet.

Dit voorbeeld tekent 2 benen van een driehoek en gebruikt closePath om de driehoek te voltooien (sluiten ?!) door het derde been te tekenen. Wat closePath eigenlijk doet, is een lijn trekken vanaf het eindpunt van het tweede been terug naar het beginpunt van het eerste been.

<!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 (een padopdracht)

context.beginPath()

Begint met het samenstellen van een nieuwe set padopdrachten en verwijdert ook elk eerder samengesteld pad.

Het verplaatst ook de tekening "pen" naar de linkerbovenhoek van het canvas (== coördinaat [0,0]).

Hoewel optioneel, moet u ALTIJD een pad beginnen met beginPath

Het weggooien is een belangrijk en vaak over het hoofd gezien punt. Als u niet begint met een nieuw pad met beginPath , worden eerder uitgegeven beginPath automatisch opnieuw getekend.

Deze 2 demo's proberen beide een "X" te tekenen met één rode lijn en één blauwe lijn.

Deze eerste demo gebruikt correct beginPath om zijn tweede rode beginPath te starten. Het resultaat is dat de "X" correct zowel een rode als een blauwe lijn heeft.

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

Deze tweede demo laat ten beginPath bij de tweede slag weg. Het resultaat is dat de "X" ten onrechte beide rode lijnen heeft.

De tweede stroke() is de tweede rode streek.

Maar zonder een tweede beginPath , datzelfde tweede stroke() ook verkeerd tekent de eerste slag.

Omdat de tweede stroke() nu rood is, wordt de eerste blauwe lijn overschreven door een onjuist gekleurde rode lijn.

<!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 (een kenmerk voor padstijlen)

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

Stelt de capstijl in van lijnbeginpunten en eindpunten.

butt , de standaardstijl lineCap, toont vierkante doppen die niet verder gaan dan de begin- en eindpunten van de lijn.
round , toont afgeronde doppen die verder gaan dan de begin- en eindpunten van de lijn.
vierkant , toont vierkante doppen die verder gaan dan de begin- en eindpunten van de lijn.

<!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 (een kenmerk voor padstijlen)

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

Stelt de stijl in die wordt gebruikt om aangrenzende lijnsegmenten te verbinden.

verstek , de standaard, verbindt lijnsegmenten met een scherpe voeg.
rond , verbindt lijnsegmenten met een afgeronde verbinding.
afgeschuind , verbindt lijnsegmenten met een stompe verbinding.

<!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 (een kenmerk voor padstijlen)

context.strokeStyle=color

Stelt de kleur in die wordt gebruikt om de omtrek van het huidige pad te strelen.

Dit zijn color (deze moeten worden geciteerd):

Een CSS met de naam kleur , bijvoorbeeld context.strokeStyle='red'
Een hex-kleur , bijvoorbeeld context.strokeStyle='#FF0000'
Een RGB-kleur , bijvoorbeeld context.strokeStyle='rgb(red,green,blue)' waarbij rood, groen en blauw gehele getallen 0-255 zijn die de sterkte van elke componentkleur aangeven.
Een HSL-kleur , bijvoorbeeld context.strokeStyle='hsl(hue,saturation,lightness)' waarbij tint een geheel getal is 0-360 op het kleurenwiel en verzadiging en lichtheid percentages zijn (0-100%) die de sterkte van elke component aangeven .
Een HSLA-kleur , bijvoorbeeld context.strokeStyle='hsl(hue,saturation,lightness,alpha)' waarbij tint een geheel getal is 0-360 op het kleurenwiel en verzadiging en lichtheid percentages zijn (0-100%) die de sterkte aangeven van elke component en alfa is een decimale waarde 0,00-1,00 die de dekking aangeeft.

U kunt ook deze kleuropties opgeven (deze opties zijn objecten die door de context zijn gemaakt):

Een lineair verloop dat een lineair verloopobject is gemaakt met context.createLinearGradient
Een radiaal verloop dat een radiaal verloopobject is gemaakt met context.createRadialGradient
Een patroon dat een patroonobject is dat is gemaakt met 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 (een kenmerk voor padstijlen)

context.fillStyle=color

Stelt de kleur in die wordt gebruikt om het interieur van het huidige pad te vullen.

Dit zijn kleuropties (deze moeten worden geciteerd):

Een CSS met de naam kleur , bijvoorbeeld context.fillStyle='red'
Een hex-kleur , bijvoorbeeld context.fillStyle='#FF0000'
Een RGB-kleur , bijvoorbeeld context.fillStyle='rgb(red,green,blue)' waarbij rood, groen en blauw gehele getallen 0-255 zijn die de sterkte van elke componentkleur aangeven.
Een HSL-kleur , bijvoorbeeld context.fillStyle='hsl(hue,saturation,lightness)' waarbij tint een geheel getal is 0-360 op het kleurenwiel en verzadiging en lichtheid percentages zijn (0-100%) die de sterkte van elke component aangeven .
Een HSLA-kleur , bijvoorbeeld context.fillStyle='hsl(hue,saturation,lightness,alpha)' waarbij tint een geheel getal is 0-360 op het kleurenwiel en verzadiging en lichtheid percentages zijn (0-100%) die de sterkte aangeven van elke component en alfa is een decimale waarde 0,00-1,00 die de dekking aangeeft.

U kunt ook deze kleuropties opgeven (deze opties zijn objecten die door de context zijn gemaakt):

Een lineair verloop dat een lineair verloopobject is gemaakt met context.createLinearGradient

Een radiaal verloop dat een radiaal verloopobject is gemaakt met context.createRadialGradient

Een patroon dat een patroonobject is dat is gemaakt met 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 (een kenmerk voor padstijlen)

context.lineWidth=lineWidth

Stelt de breedte in van de lijn die de omtrek van het pad zal omlijnen

<!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 (attributen voor padstijlen)

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

Deze set attributen voegt een schaduw rond een pad toe.

Zowel gevulde paden als streelde paden kunnen een schaduw hebben.

De schaduw is het donkerst (ondoorzichtig) aan de padomtrek en wordt geleidelijk lichter naarmate deze zich verder van de padomtrek uitstrekt.

shadowColor geeft aan welke CSS-kleur wordt gebruikt om de schaduw te maken.
shadowBlur is de afstand waarover de schaduw zich buiten het pad uitstrekt.
shadowOffsetX is een afstand waarmee de schaduw horizontaal van het pad wordt verschoven. Een positieve afstand verplaatst de schaduw naar rechts, een negatieve afstand verplaatst de schaduw naar links.
shadowOffsetY is een afstand waarmee de schaduw verticaal van het pad wordt weggeschoven. Een positieve afstand verplaatst de schaduw naar beneden, een negatieve afstand verplaatst de schaduw naar boven.

Over shadowOffsetX & shadowOffsetY

Het is belangrijk op te merken dat de hele schaduw in zijn geheel is verschoven . Hierdoor zal een deel van de schaduw onder gevulde paden verschuiven en daarom zal een deel van de schaduw niet zichtbaar zijn.

Over schaduwpartijen

Bij het overschaduwen van een streek worden zowel de binnenkant als de buitenkant van de streek geschaduwd. De schaduw is het donkerst tijdens de streek en wordt lichter naarmate de schaduw zich in beide richtingen naar buiten uitstrekt vanaf de streek.

Shading uitschakelen als u klaar bent

Nadat je je schaduwen hebt getekend, wil je misschien schaduwen uitschakelen om meer paden te tekenen. Om schaduwen uit te schakelen, stelt u de shadowColor op transparant.

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

Prestatieoverwegingen

Schaduwen (zoals verlopen) vereisen uitgebreide berekeningen en daarom moet u met mate schaduwen gebruiken.

Wees vooral voorzichtig bij het animeren, omdat het vele keren per seconde tekenen van schaduwen de prestaties aanzienlijk zal beïnvloeden. Een oplossing als u schaduwpaden moet animeren, is het schaduwpad op een tweede "schaduwdoek" vooraf te maken. Het schaduwcanvas is een normaal canvas dat in het geheugen wordt gemaakt met document.createElement - het wordt niet toegevoegd aan de DOM (het is slechts een enscenerend canvas). Teken vervolgens het schaduwdoek op het hoofddoek. Dit is veel sneller omdat de schaduwberekeningen niet vaak per seconde hoeven te worden gemaakt. Het enige wat u doet, is één vooraf gebouwd canvas naar uw zichtbare canvas kopiëren.

<!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 (maakt een padstijlobject)

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]

Creëert een herbruikbaar lineair verloop (object).

Het object kan worden toegewezen aan elke strokeStyle en / of fillStyle .

Vervolgens zal lijn () of vulling () het pad kleuren met de verloopkleuren van het object.

Het maken van een verloopobject is een proces in twee stappen:

Maak het verloopobject zelf. Tijdens het maken definieert u een lijn op het canvas waar het verloop begint en eindigt. Het verloopobject wordt gemaakt met var gradient = context.createLinearGradient .
Voeg vervolgens 2 (of meer) kleuren toe die het verloop vormen. Dit wordt gedaan door meerdere kleurstops toe te voegen aan het verloopobject met gradient.addColorStop .

argumenten:

startX, startY is de canvascoördinaat waar het verloop begint. Bij het startpunt (en daarvoor) heeft het canvas de kleur van de laagste gradientPercentPosition .
endX, endY is de canvascoördinaat waar het verloop eindigt. Op het eindpunt (en daarna) heeft het canvas de kleur van de hoogste gradientPercentPosition .
gradientPercentPosition is een floatnummer tussen 0.00 en 1.00 toegewezen aan een kleurstop. Het is eigenlijk een percentage waypoint langs de lijn waarop deze specifieke kleurstop van toepassing is.
- Het verloop begint met percentage 0.00 dat [startX, startY] op het canvas is.
- Het verloop eindigt op percentage 1,00 dat [endX, endY] op het canvas is.
- Technische opmerking: de term "percentage" is technisch niet correct, omdat de waarden van 0,00 tot 1,00 gaan in plaats van 0% tot 100%.
CssColor is een CSS-kleur die is toegewezen aan deze specifieke kleurstop.

Het verloopobject is een object dat u kunt gebruiken (en opnieuw kunt gebruiken!) Om uw penseelstreken en vullingen een verloopkleur te geven.

Kant Opmerking: het verloopobject is niet intern in het Canvas-element noch in de context ervan. Het is een afzonderlijk en herbruikbaar JavaScript-object dat u kunt toewijzen aan elk gewenst pad. U kunt dit object zelfs gebruiken om een pad op een ander canvas-element te kleuren (!)

Kleurstops zijn (percentage) waypoints langs de verlooplijn. Bij elk kleurenstop-waypoint is het verloop volledig (== ondoorzichtig) gekleurd met de toegewezen kleur. Tussentijdse punten langs de verlooplijn tussen kleurstops worden gekleurd als verlopen van deze en de vorige kleur.

Belangrijke tip over canvasgradiënten!

Wanneer u een verloopobject maakt, wordt het hele canvas "onzichtbaar" gevuld met dat verloop.

Wanneer u een pad stroke() of fill() , wordt het onzichtbare verloop zichtbaar, maar alleen over dat pad dat wordt geaaid of gevuld.

Als u een rood-naar-magenta lineair verloop als volgt maakt:

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

Dan ziet Canvas "onzichtbaar" je verloopcreatie als volgt:

Maar totdat u een stroke() of fill() met het verloop, ziet u niets van het verloop op het canvas.
Als u ten slotte een pad streelt of vult met behulp van het verloop, wordt het "onzichtbare" verloop zichtbaar op het canvas ... maar alleen waar het pad wordt getekend.

<!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 (maakt een padstijlobject)

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]

Creëert een herbruikbaar radiaal verloop (object). Het verloopobject is een object dat u kunt gebruiken (en opnieuw kunt gebruiken!) Om uw penseelstreken en vullingen een verloopkleur te geven.

Over...

Het radiale verloop van Canvas verschilt enorm van traditionele radiale verlopen.

De "officiële" (bijna niet te ontcijferen!) Definitie van het radiale verloop van Canvas staat onderaan dit bericht. Kijk er niet naar als je een zwakke instelling hebt !!

In (bijna begrijpelijke) termen:

Het radiale verloop heeft 2 cirkels: een "gietcirkel" en een "weergavecirkel".
De werpende cirkel werpt licht in de weergavecirkel.
Dat licht is het verloop.
De vorm van dat gradiëntlicht wordt bepaald door de relatieve grootte en positie van beide cirkels.

Het maken van een verloopobject is een proces in twee stappen:

Maak het verloopobject zelf. Tijdens het maken definieert u een lijn op het canvas waar het verloop begint en eindigt. Het verloopobject wordt gemaakt met var gradient = context.radialLinearGradient .
Voeg vervolgens 2 (of meer) kleuren toe die het verloop vormen. Dit wordt gedaan door meerdere kleurstops toe te voegen aan het verloopobject met gradient.addColorStop .

argumenten:

centerX1, centerY1, radius1 definieert een eerste cirkel waar het verloop wordt weergegeven.
centerX2, centerY2, radius2 definieert een tweede cirkel die gradiëntlicht in de eerste cirkel werpt.
gradientPercentPosition is een floatnummer tussen 0.00 en 1.00 toegewezen aan een kleurstop. Het is eigenlijk een percentage waypoint dat bepaalt waar deze bepaalde kleurstop langs het verloop van toepassing is.
- Het verloop begint bij percentage 0,00.
- Het verloop eindigt op percentage 1,00.
- Technische opmerking: de term "percentage" is technisch niet correct, omdat de waarden van 0,00 tot 1,00 gaan in plaats van 0% tot 100%.
CssColor is een CSS-kleur die is toegewezen aan deze specifieke kleurstop.

Belangrijke tip over canvasgradiënten!

Wanneer u een verloopobject maakt, wordt het gehele radiale verloop "onzichtbaar" op het canvas gegoten.

Wanneer u een pad stroke() of fill() , wordt het onzichtbare verloop zichtbaar, maar alleen over dat pad dat wordt geaaid of gevuld.

Als u een groen-tot-rood radiaal verloop als volgt maakt:

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

Dan ziet Canvas "onzichtbaar" je verloopcreatie als volgt:

Maar totdat u een stroke() of fill() met het verloop, ziet u niets van het verloop op het canvas.
Als u ten slotte een pad streelt of vult met behulp van het verloop, wordt het "onzichtbare" verloop zichtbaar op het canvas ... maar alleen waar het pad wordt getekend.

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

De enge officiële details

Wie beslist wat `createRadialGradient doet?

De W3C geeft de officiële aanbevolen specificaties die browsers gebruiken om het Html5 Canvas-element te bouwen.

De W3C-specificatie voor createRadialGradient luidt cryptisch als volgt:

Wat creëert createRadialGradient

createRadialGradient … maakt effectief een kegel, aangeraakt door de twee cirkels gedefinieerd in de creatie van het verloop, met het deel van de kegel voor de startcirkel (0.0) met behulp van de kleur van de eerste offset, het deel van de kegel na de eindcirkel (1.0) met behulp van de kleur van de laatste offset en gebieden buiten de kegel die niet zijn geraakt door het verloop (transparant zwart).

Hoe werkt het intern?

De createRadialGradient(x0, y0, r0, x1, y1, r1) heeft zes argumenten: de eerste drie vertegenwoordigen de startcirkel met oorsprong (x0, y0) en straal r0 en de laatste drie vertegenwoordigen de eindcirkel met oorsprong (x1) , y1) en straal r1. De waarden zijn in coördinaatruimte-eenheden. Als r0 of r1 negatief zijn, moet een uitzondering IndexSizeError worden gegenereerd. Anders moet de methode een radiale CanvasGradient retourneren die is geïnitialiseerd met de twee opgegeven cirkels.
Radiale verlopen moeten worden weergegeven door deze stappen te volgen:
Als x0 = x1 en y0 = y1 en r0 = r1, mag de radiale gradiënt niets schilderen. Breek deze stappen af.
Laat x (ω) = (x1-x0) ω + x0; Laat y (ω) = (y1-y0) ω + y0; Laat r (ω) = (r1-r0) ω + r0 Laat de kleur op ω de kleur zijn op die positie op het verloop (met de kleuren afkomstig van de hierboven beschreven interpolatie en extrapolatie).
Voor alle waarden van ω waarbij r (ω)> 0, beginnend met de waarde van ω het dichtst bij de positieve oneindigheid en eindigend met de waarde van ω het dichtst bij de negatieve oneindigheid, teken de omtrek van de cirkel met straal r (ω) op positie ( x (ω), y (ω)), met de kleur op ω, maar alleen schilderen op de delen van het canvas die nog niet zijn geschilderd door eerdere cirkels in deze stap voor deze weergave van het verloop.

createPattern (maakt een padstijlobject)

var pattern = createPattern(imageObject,repeat)

Creëert een herbruikbaar patroon (object).

Het object kan worden toegewezen aan elke strokeStyle en / of fillStyle .

Vervolgens zal lijn () of vulling () het pad verven met het patroon van het object.

argumenten:

imageObject is een afbeelding die als patroon wordt gebruikt. De bron van de afbeelding kan zijn:
- HTMLImageElement --- een img-element of een nieuwe afbeelding (),
- HTMLCanvasElement --- een canvas-element,
- HTMLVideoElement --- een video-element (haalt het huidige videoframe op)
- ImageBitmap,
- Blob.
repeat bepaalt hoe het imageObject over het canvas wordt herhaald (net als een CSS-achtergrond). Dit argument moet door citaten gescheiden zijn en geldige waarden zijn:
- "herhalen" --- het patroon zal het canvas horizontaal en verticaal vullen
- "repeat-x" --- het patroon wordt alleen horizontaal herhaald (1 horizontale rij)
- "repeat-y" --- het patroon wordt alleen verticaal herhaald (1 verticale rij)
- "herhaal niets" --- het patroon verschijnt slechts eenmaal (links bovenaan)

Het patroonobject is een object dat u kunt gebruiken (en opnieuw kunt gebruiken!) Om uw penseelstreken en vullingen van een patroon te voorzien.

Kant Opmerking: het patroonobject is niet intern in het Canvas-element noch in de context ervan. Het is een afzonderlijk en herbruikbaar JavaScript-object dat u kunt toewijzen aan elk gewenst pad. U kunt dit object zelfs gebruiken om een patroon toe te passen op een pad op een ander canvas-element (!)

Belangrijke tip over canvaspatronen!

Wanneer u een patroonobject maakt, wordt het hele canvas "onzichtbaar" gevuld met dat patroon (onder voorbehoud van het repeat ).

Wanneer u een pad aait stroke() of fill() , wordt het onzichtbare patroon onthuld, maar alleen onthuld over dat pad dat wordt geaaid of gevuld.

Begin met een afbeelding die u als patroon wilt gebruiken. Belangrijk (!): Zorg ervoor dat uw afbeelding volledig is geladen (met gebruik van patternimage.onload ) voordat u probeert deze te gebruiken om uw patroon te maken.

U maakt een patroon zoals dit:

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

Dan ziet Canvas uw patrooncreatie "onzichtbaar" als volgt:

Maar totdat u stroke() of fill() met het patroon, ziet u niets van het patroon op het canvas.
Als u ten slotte een pad aait of een pad vult met het patroon, wordt het "onzichtbare" patroon zichtbaar op het canvas ... maar alleen waar het pad wordt getekend.

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

streek (een padcommando)

context.stroke()

Zorgt ervoor dat de omtrek van het pad wordt geaaid volgens de huidige context.strokeStyle en dat het streelde pad visueel op het canvas wordt getekend.

Voorafgaand aan het uitvoeren van context.stroke (of context.fill ) bestaat het pad in het geheugen en is het nog niet visueel op het canvas getekend.

De ongebruikelijke manier waarop lijnen worden getekend

Bekijk dit voorbeeld Pad dat een zwarte lijn van 1 pixel trekt van [0,5] tot [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();

Vraag: Wat tekent de browser eigenlijk op het canvas?

U verwacht waarschijnlijk 6 zwarte pixels op y = 5

Maar (!) ... Canvas trekt lijnen altijd halverwege aan weerszijden van het gedefinieerde pad!

Omdat de lijn is gedefinieerd op y==5.0 wil Canvas de lijn trekken tussen y==4.5 en y==5.5

Maar nogmaals (!) ... Het computerscherm kan geen halve pixels tekenen!

Dus wat moet er gedaan worden met de ongewenste halve pixels (hieronder in blauw weergegeven)?

Het antwoord is dat Canvas het display daadwerkelijk opdracht geeft een lijn van 2 pixels breed te tekenen van 4.0 tot 6.0 . Het kleurt de lijn ook lichter dan het gedefinieerde black . Dit vreemde tekengedrag is "anti-aliasing" en het helpt Canvas om streken te vermijden die er gekarteld uitzien.

Een aanpassingstrick die ALLEEN werkt voor exact horizontale en verticale lijnen

U kunt een ononderbroken zwarte lijn van 1 pixel krijgen door de lijn op te geven die op de halve pixel wordt getekend:

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

Voorbeeldcode met context.stroke() om een omlijnd pad op het canvas te tekenen:

<!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 (een padcommando)

context.fill()

Zorgt ervoor dat de binnenkant van het pad wordt gevuld volgens de huidige context.fillStyle en het gevulde pad wordt visueel op het canvas getekend.

Voorafgaand aan het uitvoeren van context.fill (of context.stroke ) bestaat het pad in het geheugen en is het nog niet visueel op het canvas getekend.

Voorbeeldcode met context.fill() om een gevuld pad op het canvas te tekenen:

<!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 (een padopdracht)

context.clip

Beperkt dat toekomstige tekeningen alleen binnen het huidige pad worden weergegeven.

Voorbeeld: knip deze afbeelding in een driehoekig pad

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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

html5-canvas
Pad (alleen syntaxis)

Zoeken…

Syntaxis

Overzicht van de basisopdrachten voor padtekening: lijnen en curven

Beschrijving van de basistekenopdrachten:

lineTo (een padopdracht)

arc (een padopdracht)

quadraticCurveTo (een padopdracht)

bezierCurveTo (een padopdracht)

arcTo (een padopdracht)

rect (een padopdracht)

closePath (een padopdracht)

beginPath (een padopdracht)

lineCap (een kenmerk voor padstijlen)

lineJoin (een kenmerk voor padstijlen)

strokeStyle (een kenmerk voor padstijlen)

fillStyle (een kenmerk voor padstijlen)

lineWidth (een kenmerk voor padstijlen)

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (attributen voor padstijlen)

createLinearGradient (maakt een padstijlobject)

createRadialGradient (maakt een padstijlobject)

De enge officiële details

createPattern (maakt een padstijlobject)

streek (een padcommando)

De ongebruikelijke manier waarop lijnen worden getekend

fill (een padcommando)

clip (een padopdracht)