Wielokąt z otworem pośrodku z płótnem HTML5

Question

Za pomocą znacznika <canvas> potrzebuję móc narysować otwór w wielokącie.

W tej chwili mam coś bardzo prostego, który używa metody beginPath(), a następnie robi lineTo() dla każdego punktu. Następnie wypełnia się wypełnieniem().

Nie widzę żadnego sposobu na wypełnienie wielokąta nie wypełnionym środkiem, jak na przykład pączek. Nie robię pączka, ale nadaje się do tego przykładu.

Czy jest coś, czego mi brakuje? Wolałbym nie rysować go w pełni wypełniony, a następnie trzeba przerysować środek.

Answer 1

To co zrobiłem to działa:

var ctx = canvas.getContext("2d");  
ctx.beginPath(); 

//polygon1--- usually the outside polygon, must be clockwise 
ctx.moveTo(0, 0); 
ctx.lineTo(200, 0); 
ctx.lineTo(200, 200); 
ctx.lineTo(0, 200); 
ctx.lineTo(0, 0); 
ctx.closePath(); 

//polygon2 --- usually hole,must be counter-clockwise 
ctx.moveTo(10, 10); 
ctx.lineTo(10,100); 
ctx.lineTo(100, 100); 
ctx.lineTo(100, 10); 
ctx.lineTo(10, 10); 
ctx.closePath(); 

// add as many holes as you want 
ctx.fillStyle = "#FF0000"; 
ctx.strokeStyle = "rgba(0.5,0.5,0.5,0.5)"; 
ctx.lineWidth = 1; 
ctx.fill(); 
ctx.stroke(); 

Główną ideą jest tutaj można użyć tylko raz beginPath; wielokąt zewnętrzny musi być zgodny z ruchem wskazówek zegara, a otwory muszą być przeciwne do ruchu wskazówek zegara.

Answer 2

Narysuj swój kształt w kierunku zgodnym z ruchem wskazówek zegara (na przykład). Następnie można zwiększyć lub zmniejszyć promień i przejść w kierunku przeciwnym do ruchu wskazówek zegara.

Answer 3

Masz 2 opcje do rysowania otworów z płótna HTML5.

Wybór 1: Narysuj kształt zewnętrzny i kształt wewnętrzny w różnych kierunkach.

Kształt zewnętrzny zgodny z ruchem wskazówek zegara i wewnętrzny.
Lub zewnętrzny kształt zgodnie z ruchem wskazówek zegara i wewnętrzny przeciwnie do ruchu wskazówek zegara.

ctx.beginPath(); 
//outer shape, clockwise 
ctx.moveTo(100,20); 
ctx.lineTo(200,200); 
ctx.lineTo(20,200); 
ctx.closePath(); 
//inner shape (hole), counter-clockwise 
ctx.moveTo(100,100); 
ctx.lineTo(70,170); 
ctx.lineTo(140,170); 
ctx.closePath(); 
//fill 
ctx.fillStyle = "#FF0000"; 
ctx.fill(); 

To trochę bólu, aby wykryć kierunek rysowania kształtu, kiedy kodujemy.

Jeśli trzeba wykryć, czy seria kropek jest w prawo, czy nie, tutaj jest dobrym funkcja:

function isClockwise(dots){ 
    var sum = 0; 
    for(var i=1, n=dots.length; i<n; i++){ 
     sum += (dots[i][0] - dots[i-1][0]) * (dots[i][1] + dots[i-1][1]); 
    } 
    sum += (dots[0][0] - dots[n-1][0]) * (dots[0][1] + dots[n-1][1]); 
    return sum < 0; 
} 
console.log(isClockwise([[100,20], [200,200], [20,200]])); //true 
console.log(isClockwise([[100,20], [20,200], [200,200]])); //false 

Jeśli kropki jest do ruchu wskazówek zegara, ale trzeba w lewo, .reverse() twoje kropki szyk.

var dots = [[100,20], [200,200], [20,200]]; 
dots.reverse(); 

---

Wybór 2:
Użyj 'evenodd' wypełnić regułę, rysować swoje kształty w dowolnym kierunku.
Ten sposób jest o wiele prostsze niż wybór 1.
zobaczyć fill() method API:

void ctx.fill(); 
    void ctx.fill(fillRule); 
    void ctx.fill(path, fillRule); 

fillRule może być "niezerowe" lub "evenodd"
"niezerowe": Niezasychające zasada zerowania uzwojenia, która jest regułą domyślną.
"evenodd": reguła "parzyste".

Answer 4

Można użyć evenodd wypełnienia zasadę: fill('evenodd')

// properties 
 
// - outer square 
 
var outerLength = 200; 
 
// - inner length 
 
var innerLength = outerLength/2; 
 

 
// cnavas 
 
var canvas = document.getElementById('canvas'); 
 
var width = canvas.width = document.body.clientWidth; 
 
var height = canvas.height = document.body.clientHeight; 
 
var context = canvas.getContext('2d'); 
 

 
// path 
 
// - outer square 
 
context.rect(
 
    (width - outerLength)/2, 
 
    (height - outerLength)/2, 
 
    outerLength, 
 
    outerLength 
 
); 
 
// - inner square 
 
var x0 = (width - innerLength)/2; 
 
var y0 = (height - innerLength)/2; 
 
context.moveTo(x0, y0); 
 
context.rect(
 
    x0, 
 
    y0, 
 
    innerLength, 
 
    innerLength 
 
); 
 

 
// draw 
 
// - stroke 
 
context.lineWidth = 10; 
 
context.stroke(); 
 
// - fill 
 
context.fillStyle = 'red'; 
 
context.fill('evenodd');

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
}

<canvas id="canvas"><canvas>