html5-canvas => Sökväg (endast syntax)

Syntax

context.beginPath ()
context.moveTo (startx, startY)
context.lineTo (endX, Endy)
context.arc (centerX, centerY, radie, startRadianAngle, endingRadianAngle)
context.quadraticCurveTo (controlX, controlY, endX, Endy)
context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, endX, Endy)
context.arcTo (punktX1, punktY1, punktX2, punktY2, radie)
context.rect (vänsterX, toppY, bredd, höjd);
context.closePath ()

Översikt över kommandon för grundläggande sökvägar: linjer och kurvor

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

TODO: Länk var och en av ritningskommandona nedan till sina enskilda exempel. Jag vet inte hur jag gör detta eftersom länkarna till de enskilda exemplen pekar mot mappen "utkast".

TODO: Lägg till exempel för dessa sökväg "action" -kommandon: stroke (), fill (), clip ()

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

Väg

En bana definierar en uppsättning linjer och kurvor som kan synas på ritningen.

En sökväg ritas inte automatiskt på duken. Men banans linjer och kurvor kan dras på duken med ett stiliserat slag. Och den form som skapas av linjerna och kurvorna kan också fyllas med en stilfull fyllning.

Vägar har användningar utöver ritning på duken:

Hit testning om en x, y-koordinat är i banformen.
Definiera ett urklippsområde där endast ritningar i klippområdet är synliga. Eventuella ritningar utanför klippområdet kommer inte att ritas (== transparent) - liknande CSS-överflöde.

De grundläggande kommandoteckningarna är:

beginPath
flytta till
lineTo
båge
quadraticCurveTo
bezierCurveTo
arcTo
rect
closePath

Beskrivning av de grundläggande ritningskommandona:

beginPath

context.beginPath()

Börjar montera en ny uppsättning vägkommandon och tar bort alla tidigare monterade sökvägar.

Kassering är en viktig och ofta förbises punkt. Om du inte börjar en ny sökväg kommer alla tidigare utfärdade sökkommandon automatiskt att ritas om.

Den flyttar också ritningen "penna" till det övre vänstra ursprunget på duken (== koordinat [0,0]).

flytta till

context.moveTo(startX, startY)

Flyttar den aktuella pennplatsen till koordinaten [startX, startY].

Som standard är alla banritningar kopplade ihop. Så slutpunkten för en linje eller kurva är startpunkten för nästa linje eller kurva. Detta kan leda till att en oväntad linje dras mellan två intilliggande ritningar. context.moveTo kommandot "plockar upp ritpennan" och placerar den vid en ny koordinat så att den automatiska anslutningslinjen inte dras.

lineTo

context.lineTo(endX, endY)

Ritar ett linjesegment från den aktuella pennplatsen för att koordinera [endX, endY]

Du kan montera flera .lineTo kommandon för att rita en polyline. Till exempel kan du montera tre linjesegment för att bilda en triangel.

båge

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

Ritar en cirkulär båge som ges en mittpunkt, radie och start- och slutvinklar. Vinklarna uttrycks som radianer. För att konvertera grader till radianer kan du använda denna formel: radians = degrees * Math.PI / 180; .

Vinkel 0 vetter direkt åt höger från bågens mitt. För att rita en komplett cirkel kan du göra endingAngle = startAngle + 360 grader (360 grader == Math.PI 2): `context.arc (10,10,20,0, Math.PI 2);

Som standard dras bågen medsols. En valfri [sann | falsk] -parameter instruerar bågen att dras moturs: context.arc(10,10,20,0,Math.PI*2,true)

quadraticCurveTo

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

Ritar en kvadratisk kurva som börjar vid den aktuella pennplatsen till en given slutkoordinat. En annan given kontrollkoordinat bestämmer kurvanas form (kurvighet).

bezierCurveTo

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

Ritar en kubisk Bezier-kurva som börjar vid den aktuella pennplatsen till en given slutkoordinat. Ytterligare 2 givna kontrollkoordinater bestämmer kurvens form (kurvighet).

arcTo

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

Ritar en cirkulär båge med en given radie. Bågen dras medurs inuti kilen bildad av den aktuella pennplatsen och ges två punkter: Punkt 1 och punkt2.

En linje som förbinder den aktuella pennplatsen och början av bågen dras automatiskt före bågen.

rect

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

Ritar en rektangel med ett övre vänstra hörn och en bredd och höjd.

context.rect är ett unikt ritningskommando eftersom det lägger till frånkopplade rektanglar. Dessa frånkopplade rektanglar ansluts inte automatiskt med linjer.

closePath

context.closePath()

Ritar en linje från den aktuella pennplatsen tillbaka till startvägskoordinaten.

Om du till exempel ritar två linjer som bildar 2 ben i en triangel, kommer " closePath " att stänga triangeln genom att dra det tredje benet i triangeln från andra benets slutpunkt tillbaka till första benets startpunkt.

Detta kommandors namn får ofta missförståelse. context.closePath är INTE en context.beginPath till context.beginPath . Återigen drar closePath kommandot en linje - det "stänger inte" ett beginPath .

lineTo (ett sökkommando)

context.lineTo(endX, endY)

Ritar ett linjesegment från den aktuella pennplatsen för att koordinera [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>

Du kan montera flera .line-kommandon för att rita en polyline. Till exempel kan du montera tre linjesegment för att bilda en triangel.

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

båge (ett sökkommando)

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

Vinkel 0 vetter direkt åt höger från bågens mitt.

Som standard dras bågen medsols. En valfri [sann | falsk] -parameter instruerar bågen att dras moturs: 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>

För att rita en komplett cirkel kan du göra endingAngle = startAngle + 360 grader (360 grader == Math.PI2).

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

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

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

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

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

quadraticCurveTo (ett sökkommando)

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

Ritar en kvadratisk kurva som börjar vid den aktuella pennplatsen till en given slutkoordinat. En annan given kontrollkoordinat bestämmer kurvanas form (kurvighet).

<!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 (ett sökkommando)

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

Ritar en kubisk Bezier-kurva som börjar vid den aktuella pennplatsen till en given slutkoordinat. Ytterligare 2 givna kontrollkoordinater bestämmer kurvens form (kurvighet).

<!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 (ett sökkommando)

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

Ritar en cirkulär båge med en given radie. Bågen dras medurs inuti kilen bildad av den aktuella pennplatsen och ges två punkter: Punkt 1 och punkt2.

En linje som förbinder den aktuella pennplatsen och början av bågen dras automatiskt före bågen.

<!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 (ett sökkommando)

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

Ritar en rektangel med ett övre vänstra hörn och en bredd och höjd.

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

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

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

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

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

context.rect är ett unikt ritningskommando eftersom det lägger till frånkopplade rektanglar.

Dessa frånkopplade rektanglar ansluts inte automatiskt med linjer.

<!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 (ett sökkommando)

context.closePath()

Ritar en linje från den aktuella pennplatsen tillbaka till startvägskoordinaten.

Om du till exempel ritar två linjer som bildar 2 ben i en triangel, kommer "ClosePath" att stänga triangeln genom att dra det tredje benet i triangeln från andra benets slutpunkt tillbaka till första benets startpunkt.

En missuppfattning förklarade!

Detta kommandors namn får ofta missförståelse.

context.closePath är INTE en context.beginPath till context.beginPath .

Återigen drar closePath-kommandot en rad - det "stänger inte" ett beginPath.

Detta exempel ritar två ben av en triangel och använder closePath att slutföra (stänga?) Triangeln genom att rita det tredje benet. Vad closePath faktiskt gör är att rita en linje från det andra benets slutpunkt tillbaka till den första benets utgångspunkt.

<!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 (ett sökkommando)

context.beginPath()

Börjar montera en ny uppsättning vägkommandon och tar bort alla tidigare monterade sökvägar.

Den flyttar också ritningen "penna" till det övre vänstra ursprunget på duken (== koordinat [0,0]).

Även om det är valfritt bör du ALLTID starta en sökväg med beginPath

Kassering är en viktig och ofta förbises punkt. Om du inte börjar en ny sökväg med beginPath kommer alla tidigare utfärdade sökkommandon automatiskt att ritas om.

Dessa två demonstrationer försöker båda rita ett "X" med ett rött slag och ett blått slag.

Denna första demo använder beginPath att starta den andra röda streken. Resultatet är att "X" korrekt har både rött och blått.

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

Denna andra demo lämnar felaktigt ut beginPath på det andra slaget. Resultatet är att "X" felaktigt har båda röda slag.

Det andra stroke() ritar det andra röda slaget.

Men utan ett andra beginPath , samma samma stroke() ritas också felaktigt det första slaget.

Eftersom det andra stroke() nu är utformat som rött skrivs det första blåslaget av ett felaktigt rött slagslag.

<!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 (ett sökvägsstylingattribut)

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

Ställer in kapstilen för linjens startpunkter och slutpunkter.

rumpa , standard lineCap-stil, visar kvadratiska mössor som inte sträcker sig utöver linjens start- och slutpunkter.
runda , visar rundade mössor som sträcker sig utöver linjens start- och slutpunkter.
kvadrat , visar kvadratiska mössor som sträcker sig utanför linjens start- och slutpunkter.

<!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 (ett sökstylingattribut)

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

Ställer in den stil som används för att ansluta angränsande linjesegment.

miter , standard, förenar linjesegment med en skarp skarv.
rund , förenar linjesegment med en rundad fog.
avfasning , förenar linjesegment med en trubbig fog.

<!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 (ett sökvägsstylingattribut)

context.strokeStyle=color

Ställer in färgen som ska användas för att sträcka konturen för den aktuella banan.

Dessa är color (dessa skall anges):

En CSS med namnet färg , till exempel context.strokeStyle='red'
En hexfärg , till exempel context.strokeStyle='#FF0000'
En RGB-färg, till exempel context.strokeStyle='rgb(red,green,blue)' där röd, grön & blå är heltal 0-255 indikerar styrkan hos varje komponent färg.
En HSL-färg , till exempel context.strokeStyle='hsl(hue,saturation,lightness)' där nyans är ett heltal 0-360 på färghjulet och mättnad och ljushet är procenttal (0-100%) som indikerar styrkan hos varje komponent .
En HSLA-färg , till exempel context.strokeStyle='hsl(hue,saturation,lightness,alpha)' där nyans är ett heltal 0-360 på färghjulet och mättnad och ljushet är procenttal (0-100%) som indikerar styrkan hos varje komponent och alfa är ett decimalvärde 0,00-1,00 som indikerar opaciteten.

Du kan också ange dessa färgalternativ (dessa alternativ är objekt som skapats av sammanhanget):

En linjär gradient som är ett linjärt gradientobjekt skapat med context.createLinearGradient
En radiell gradient som är ett radiellt gradientobjekt skapat med context.createRadialGradient
Ett mönster som är ett mönsterobjekt skapat med 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 (ett sökvägsstylingattribut)

context.fillStyle=color

Ställer in färgen som ska användas för att fylla det inre av den aktuella banan.

Dessa är färgalternativ (dessa måste anges):

En CSS med namnet färg , till exempel context.fillStyle='red'
En hexfärg , till exempel context.fillStyle='#FF0000'
En RGB-färg , till exempel context.fillStyle='rgb(red,green,blue)' där röd, grön & blå är heltal 0-255 som indikerar styrkan hos varje komponentfärg.
En HSL-färg , till exempel context.fillStyle='hsl(hue,saturation,lightness)' där nyans är ett heltal 0-360 på färghjulet och mättnad och ljushet är procenttal (0-100%) som indikerar styrkan hos varje komponent .
Ett HSLA färg, till exempel context.fillStyle='hsl(hue,saturation,lightness,alpha)' där nyans är ett heltal 0-360 på färghjulet och mättnad & ljushet är procentsatser (0-100%) som indikerar styrkan hos varje komponent och alfa är ett decimalvärde 0,00-1,00 som indikerar opaciteten.

Du kan också ange dessa färgalternativ (dessa alternativ är objekt som skapats av sammanhanget):

En linjär gradient som är ett linjärt gradientobjekt skapat med context.createLinearGradient

En radiell gradient som är ett radiellt gradientobjekt skapat med context.createRadialGradient

Ett mönster som är ett mönsterobjekt skapat med context.createPattern

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

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

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

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

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

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

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

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

lineWidth (Attribut för en sökvägsstyling)

context.lineWidth=lineWidth

Ställer in bredden på linjen som kommer att sträcka banans kontur

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

skuggaFärg, skuggaBlur, skuggaOffsetX, skuggaOffsetY (path styling attribut)

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

Denna uppsättning attribut lägger till en skugga runt en sökväg.

Både fyllda vägar och sträckta stigar kan ha en skugga.

Skuggan är mörkast (ogenomskinlig) vid stigens omkrets och blir lutande lättare när den sträcker sig bort från banans omkrets.

shadowColor anger vilken CSS-färg som ska användas för att skapa skuggan.
skuggaBlur är det avstånd som skuggan sträcker sig utåt från banan.
shadowOffsetX är ett avstånd som skuggan flyttas horisontellt bort från banan. Ett positivt avstånd förflyttar skuggan åt höger, ett negativt avstånd förflyttar skuggan åt vänster.
shadowOffsetY är ett avstånd som skuggan flyttas vertikalt bort från banan. Ett positivt avstånd förflyttar skuggan nedåt, ett negativt avstånd förflyttar skuggan uppåt.

Om skuggaOffsetX & skuggaOffsetY

Det är viktigt att notera att hela skuggan förskjuts i sin helhet . Detta kommer att få en del av skuggan att växla under fyllda banor och därför kommer en del av skuggan inte att vara synlig.

Om skuggade slag

När du skuggar en stroke, så skuggas både insidan och utsidan av stroke. Skuggan är mörkast vid stroke och tänds när skuggan sträcker sig utåt i båda riktningarna från stroke.

Stänga av skuggan när du är klar

När du har ritat dina skuggor kanske du vill stänga av skuggan för att rita fler vägar. För att stänga av skuggningen ställer du in shadowColor till transparent.

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

Resultathänsyn

Skuggor (som lutningar) kräver omfattande beräkningar och därför bör du använda skuggor sparsamt.

Var särskilt försiktig när du animerar eftersom ritning av skuggor många gånger per sekund kommer att påverka prestandan mycket. En lösning om du behöver animera skuggade vägar är att skapa den skuggade banan på en andra "skugga-duk". Skugga-duken är en vanlig duk som skapas i minnet med document.createElement - den läggs inte till i DOM (det är bara en iscensättning av duk). Rita sedan skugga-duken på huvudduken. Detta är mycket snabbare eftersom skuggberäkningarna inte behöver göras många gånger per sekund. Allt du gör är att kopiera en förbyggd duk på din synliga duk.

<!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 (skapar ett sökvägsstylingsobjekt)

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]

Skapar en återanvändbar linjär gradient (objekt).

Objektet kan tilldelas valfri strokeStyle och / eller fillStyle .

Sträck () eller fyllning () kommer sedan att färga sökvägen med objektets lutningsfärger.

Skapa ett gradientobjekt är en tvåstegsprocess:

Skapa själva gradientobjektet. Under skapandet definierar du en linje på duken där lutningen börjar och slutar. Gradientobjektet skapas med var gradient = context.createLinearGradient .
Lägg sedan till 2 (eller fler) färger som utgör lutningen. Detta görs genom att lägga till flera färgstopp i gradientobjektet med gradient.addColorStop .

Argument:

startX, startY är dukskoordinaten där lutningen börjar. Vid utgångspunkten (och före) är duken fast färgen på den lägsta gradientPercentPosition .
endX, endY är dukskoordinaten där lutningen slutar. Vid slutpunkten (och efter) är duken fast färgen på den högsta gradientPercentPosition .
gradientPercentPosition är ett flytnummer mellan 0,00 och 1,00 tilldelat ett färgstopp. Det är i princip en procentuell waypoint längs linjen där det här färgstoppet gäller.
- Lutningen börjar med procent 0,00 vilket är [startX, startY] på duken.
- Lutningen slutar med procent 1,00 vilket är [endX, endY] på duken.
- Teknisk anmärkning: Termen "procent" är inte tekniskt korrekt eftersom värdena går från 0,00 till 1,00 snarare än 0% till 100%.
CssColor är en CSS-färg tilldelad till detta specifika färgstopp.

Gradientobjektet är ett objekt som du kan använda (och återanvända!) För att få dina bansteg och fyllningar att bli lutningsfärgade.

Sidanmärkning: Gradientobjektet är inte internt i Canvas-elementet och inte heller i sitt sammanhang. Det är ett separat och återanvändbart JavaScript-objekt som du kan tilldela vilken väg du vill. Du kan till och med använda detta objekt för att färga en sökväg på ett annat Canvas-element (!)

Färgstopp är (procent) waypoints längs lutningslinjen. Vid varje waypoint för färgstopp är gradienten färgad (== opak) med den tilldelade färgen. Delpunkter längs lutningslinjen mellan färgstopp färgas som lutningar för denna och föregående färg.

Viktigt tips om kanfasgradienter!

När du skapar ett lutningsobjekt fylls hela duken "osynligt" med den lutningen.

När du stroke() eller fill() en bana avslöjas den osynliga lutningen, men bara avslöjas över den sökvägen som ströks eller fylls.

Om du skapar en röd-till-magenta linjär gradient så här:

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

Då kan Canvas "osynligt" se din gradientskapning så här:

Men tills du stroke() eller fill() med lutningen, ser du ingen av lutningen på duken.
Slutligen, om du stryker eller fyller en bana med lutningen, blir den "osynliga" lutningen synlig på duken ... men bara där banan ritas.

<!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 (skapar ett sökvägsstylingsobjekt)

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]

Skapar en återanvändbar radiell gradient (objekt). Gradientobjektet är ett objekt som du kan använda (och återanvända!) För att få dina bansteg och fyllningar att bli lutningsfärgade.

Handla om...

Canvas radiella lutning skiljer sig mycket från traditionella radiella lutningar.

Den "officiella" (nästan okrypterbara!) Definitionen av Canvas radiella gradient ligger längst ner i detta inlägg. Titta inte på det om du har en svag disposition !!

I (nästan förståeligt) termer:

Den radiella lutningen har 2 cirklar: en "gjutning" -cirkel och en "visning" -cirkel.
Gjutcirkeln kastar ljus in i skärmcirkeln.
Det ljuset är lutningen.
Formen på det gradientljuset bestäms av den relativa storleken och positionen för båda cirklarna.

Skapa ett gradientobjekt är en tvåstegsprocess:

Skapa själva gradientobjektet. Under skapandet definierar du en linje på duken där lutningen börjar och slutar. Gradientobjektet skapas med var gradient = context.radialLinearGradient .
Lägg sedan till 2 (eller fler) färger som utgör lutningen. Detta görs genom att lägga till flera färgstopp i gradientobjektet med gradient.addColorStop .

Argument:

centerX1, centerY1, radius1 definierar en första cirkel där lutningen ska visas.
centerX2, centerY2, radius2 definierar en andra cirkel som kastar gradientljus in i den första cirkeln.
gradientPercentPosition är ett flytnummer mellan 0,00 och 1,00 tilldelat ett färgstopp. Det är i princip en procentuell waypoint som definierar var detta speciella färgstopp gäller längs lutningen.
- Lutningen börjar med procent 0,00.
- Lutningen slutar med procent 1,00.
- Teknisk anmärkning: Termen "procent" är inte tekniskt korrekt eftersom värdena går från 0,00 till 1,00 snarare än 0% till 100%.
CssColor är en CSS-färg tilldelad till detta specifika färgstopp.

Viktigt tips om kanfasgradienter!

När du skapar ett lutningsobjekt kastas hela radiella lutning "osynligt" på duken.

När du stroke() eller fill() en bana avslöjas den osynliga lutningen, men bara avslöjas över den sökvägen som ströks eller fylls.

Om du skapar en grön-till-röd radiell lutning så här:

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

Då kan Canvas "osynligt" se din gradientskapning så här:

Men tills du stroke() eller fill() med lutningen, ser du ingen av lutningen på duken.
Slutligen, om du stryker eller fyller en bana med lutningen, blir den "osynliga" lutningen synlig på duken ... men bara där banan ritas.

<!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 läskiga officiella detaljerna

Vem bestämmer vad `createRadialGradient gör?

W3C utfärdar de officiella rekommenderade specifikationerna som webbläsare använder för att bygga Html5 Canvas-elementet.

W3C-specifikationen för createRadialGradient läser kryptiskt så här:

Vad skapar createRadialGradient

createRadialGradient ... skapar effektivt en kon, berörd av de två cirklarna som definierats i skapandet av lutningen, med konens del innan startcirkeln (0.0) med färgen på den första offset, den delen av konen efter slutcirkeln (1.0) med hjälp av färgen på den sista förskjutningen och områden utanför konen orörda av lutningen (transparent svart).

Hur fungerar det internt

createRadialGradient(x0, y0, r0, x1, y1, r1) tar sex argument, de första tre representerar startcirkeln med ursprung (x0, y0) och radie r0, och de sista tre representerar slutcirkeln med ursprung (x1 , y1) och radie rl. Värdena är i koordinatutrymmeenheter. Om någon av r0 eller r1 är negativa måste ett IndexSizeError-undantag kastas. Annars måste metoden returnera en radiell CanvasGradient initialiserad med de två angivna cirklarna.
Radiella gradienter måste återges genom att följa dessa steg:
Om x0 = x1 och y0 = y1 och r0 = r1, får den radiella lutningen inte måla något. Avbryt dessa steg.
Låt x (ω) = (x1-x0) ω + x0; Låt y (ω) = (y1-y0) ω + y0; Låt r (ω) = (r1-r0) ω + r0 Låt färgen vid ω vara färgen på det läget på lutningen (med färgerna kommer från interpolering och extrapolering som beskrivs ovan).
För alla värden på ω där r (ω)> 0, börjar med värdet på ω närmast positiv oändlighet och slutar med värdet på ω närmast negativ oändlighet, rita cirkelns omkrets med radien r (ω) på position ( x (ω), y (ω)), med färgen på ω, men målar bara på de delar av duken som ännu inte har målats av tidigare cirklar i detta steg för denna återgivning av lutningen.

createPattern (skapar ett vägstylingobjekt)

var pattern = createPattern(imageObject,repeat)

Skapar ett återanvändbart mönster (objekt).

Objektet kan tilldelas valfri strokeStyle och / eller fillStyle .

Sträck () eller fyllning () målar sedan banan med objektets mönster.

Argument:

imageObject är en bild som kommer att användas som ett mönster. Källan till bilden kan vara:
- HTMLImageElement --- ett img-element eller en ny bild (),
- HTMLCanvasElement --- ett dukelement,
- HTMLVideoElement --- ett videoelement (tar tag i den aktuella videoramen)
- ImageBitmap,
- Klick.
repetition avgör hur imageObject ska upprepas över duken (ungefär som en CSS-bakgrund). Detta argument måste vara citatavgränsat och giltiga värden är:
- "upprepa" --- mönstret kommer att fylla horisontellt och vertikalt på duken
- "upprepa-x" --- mönstret upprepas bara horisontellt (1 horisontell rad)
- "repetera-y" --- mönstret upprepas endast vertikalt (1 vertikal rad)
- "upprepa ingen" --- mönstret visas bara en gång (uppe till vänster)

Mönsterobjektet är ett objekt som du kan använda (och återanvända!) För att få dina bansteg och fyllningar att bli mönstrade.

Sidanmärkning: Mönsterobjektet är inte internt i Canvas-elementet och inte heller i Context. Det är ett separat och återanvändbart JavaScript-objekt som du kan tilldela vilken väg du vill. Du kan till och med använda detta objekt för att tillämpa mönster på en sökväg på ett annat Canvas-element (!)

Viktigt tips om kanfasmönster!

När du skapar ett mönsterobjekt fylls hela duken "osynligt" med det mönstret (med förbehåll för repeat ).

När du stroke() eller fill() en bana avslöjas det osynliga mönstret, men bara avslöjas över den sökvägen som ströks eller fylls.

Börja med en bild som du vill använda som mönster. Viktigt (!): Se till att din bild har laddats fullständigt (med hjälp av patternimage.onload ) innan du försöker använda den för att skapa ditt mönster.

Du skapar ett mönster så här:

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

Då kommer Canvas "osynligt" att se ditt mönsterskapande så här:

Men tills du stroke() eller fill() med mönstret ser du inget av mönstret på duken.
Slutligen, om du stryker eller fyller en bana med mönstret, blir det "osynliga" mönstret synligt på duken ... men bara där banan ritas.

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

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

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

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

stroke (ett sökkommando)

context.stroke()

context.strokeStyle enlighet med det nuvarande context.strokeStyle och den sträckta vägen dras visuellt på duken.

Innan context.stroke (eller context.fill ) context.fill vägen i minnet och är ännu inte visuellt ritad på duken.

De ovanliga sättstreckarna dras

Tänk på detta exempelväg som drar en svart linje med 1 pixel från [0,5] till [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();

Fråga: Vad drar webbläsaren faktiskt på duken?

Du förväntar dig förmodligen att få 6 svarta pixlar på y = 5

Men (!) ... Canvas drar alltid slag halvvägs till endera sidan av den definierade banan!

Så eftersom linjen definieras på y==5.0 vill Canvas rita linjen mellan y==4.5 och y==5.5

Men igen (!) ... Datorskärmen kan inte rita halvpixlar!

Så vad ska man göra med de oönskade halvpixlarna (visas i blått nedan)?

Svaret är att Canvas faktiskt beställer skärmen att rita en 2 pixel bred linje från 4.0 till 6.0 . Det färgar också linjen ljusare än den definierade black . Detta konstiga ritningsbeteende är "anti-aliasing" och det hjälper Canvas att undvika ritstreck som ser snygga ut.

Ett justerande trick som KUN fungerar för exakt horisontella och vertikala drag

Du kan få en 1 pixel helt svart linje genom att ange linjen som ska dras på halvpixeln:

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

Exempelkod med context.stroke() att rita en streckad väg på duken:

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

fylla (ett sökkommando)

context.fill()

context.fillStyle insida ska fyllas i enlighet med det aktuella context.fillStyle och den fyllda vägen dras visuellt på duken.

Innan context.fill (eller context.stroke ) context.stroke vägen i minnet och är ännu inte visuellt ritad på duken.

Exempelkod med context.fill() att rita en fylld sökväg på duken:

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

klipp (ett sökkommando)

context.clip

Begränsar eventuella framtida ritningar endast för att visas inom den aktuella vägen.

Exempel: Klipp den här bilden i en triangulär sökväg

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

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

html5-canvas
Sökväg (endast syntax)

Sök…

Syntax

Översikt över kommandon för grundläggande sökvägar: linjer och kurvor

Beskrivning av de grundläggande ritningskommandona:

lineTo (ett sökkommando)

båge (ett sökkommando)

quadraticCurveTo (ett sökkommando)

bezierCurveTo (ett sökkommando)

arcTo (ett sökkommando)

rect (ett sökkommando)

closePath (ett sökkommando)

beginPath (ett sökkommando)

lineCap (ett sökvägsstylingattribut)

lineJoin (ett sökstylingattribut)

strokeStyle (ett sökvägsstylingattribut)

fillStyle (ett sökvägsstylingattribut)

lineWidth (Attribut för en sökvägsstyling)

skuggaFärg, skuggaBlur, skuggaOffsetX, skuggaOffsetY (path styling attribut)

createLinearGradient (skapar ett sökvägsstylingsobjekt)

createRadialGradient (skapar ett sökvägsstylingsobjekt)

De läskiga officiella detaljerna

createPattern (skapar ett vägstylingobjekt)

stroke (ett sökkommando)

De ovanliga sättstreckarna dras

fylla (ett sökkommando)

klipp (ett sökkommando)