Canvas inneren Hub

Question

Ich studierte strokeStyle ein bisschen, aber ich kann nicht finden, wie man die Position des Anschlags von innerem/Mitte/äußerem steuert. Es scheint, dass der ganze Schlag außerhalb des Rechtecks ​​liegt, das ich zeichne. Gibt es den Schlaganfall trotzdem innerlich? (oder sogar auf die Rechteckgrenzen zentriert)?

Dank

Answer 1

Der Standardtakt tun zentriert Hub verwenden, aber es ist leider kein Parameter, um die Ausrichtung des Hubes zu steuern, so würden Sie entweder einen Offset-Wert für das Rechteck Position und Größe, oder kombinieren Sie zwei Rechtecke berechnen und verwenden beispielsweise die Fill-Regel evenodd:

var ctx = c.getContext("2d"); 
 

 
// default centered 
 
ctx.lineWidth = 10; 
 
ctx.strokeRect(10, 10, 100, 100); 
 

 
ctx.lineWidth = 1; 
 
ctx.strokeStyle = "red"; 
 
ctx.strokeRect(10, 10, 100, 100);   // show main path 
 

 
// inner 
 
ctx.rect(150, 10, 100, 100); 
 
ctx.rect(150+10, 10+10, 100-20, 100-20); // offset position and size 
 
ctx.fill("evenodd");      // !important 
 
ctx.strokeRect(150, 10, 100, 100);

<canvas id=c></canvas>

Answer 2

Diese Antwort "Draw outer and inner border around any canvas shape "zeigt, wie Maskierung und Compositing verwendet werden, um den Versatz sowohl nach innen als auch nach außen zu steuern, ohne dass Pfade manipuliert werden müssen. Es kann für jeden Canvas-Pfad verwendet werden, egal wie komplex er ist.

Answer 3

Hoffe, das hilft!

Statt tun:

ctx.fill(); 
ctx.stroke(); 

DO:

ctx.save(); 
ctx.clip(); 
ctx.lineWidth *= 2; 
ctx.fill(); 
ctx.stroke(); 
ctx.restore(); 

bearbeiten

Für mich Ich glaube, das bec funktioniert Nachdem die Clipmethode entfernt hat, füllen und streichen sie um den bereits vorhandenen Füllbereich, was bedeutet, dass die einzige Stelle, an der der Strich gehen kann, auf der Innenseite liegt, da sie andernfalls abgeschnitten würde.