Tuval iç çarpması

Question

strokeStyle biraz çalıştım ama inme konumunu iç/orta/dıştan nasıl kontrol edeceğimi bulamıyorum. Tüm inme, çizdiğim dikdörtgenin dışında görünüyor. Felç iç olsun diye bir şey var mı? (veya dikdörtgensel sınırlarda ortalanmış)?

Teşekkür

Answer 1

varsayılan inme merkezli inme kullanırım ama dikdörtgenin konumu ve boyutu için bir ofset değeri hesaplamak için varsa, ya iki dikdörtgenler birleştirmek istiyorsunuz ya dolayısıyla inme hizalamasını denetlemek için parametre maalesef yoktur ve örneğin dolgu-kuralını evenodd kullanın:

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

Bu cevap "Draw outer and inner border around any canvas shape "Yolları işlemeye gerek kalmadan bir konturun hem iç hem de dışa doğru ofsetini kesin olarak kontrol etmek için maskeleme ve birleştirme işleminin nasıl kullanılacağını gösterir. Ne kadar karmaşık olursa olsun, herhangi bir tuval yolu için kullanılabilir.

Answer 3

Bu yardımcı olur umarız! Yerine yapmanın

:

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

DO: Benim için

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

Düzenleme

Bu bec çalışır inanıyoruz ause klip metodu 'u doldurur ve zaten mevcut doldurma alanı etrafında hareket ettirir, yani konturun gidebileceği tek yer, yani kesileceği anlamına gelir.