Как заполнить пользовательскую форму, была ли в холсте?

Question

Im пытаюсь нарисовать пользовательскую форму, но так как я использую moveTo .. Я не могу заполнить его, так что мой вопрос в том, что какой-либо способ может быть определен точками на экране, чтобы заполнить форму? или делать, что я больше всего использовать или нарисовал еще одну реальную форму в том же блоке, как слой ...

Посмотрите на мой пример здесь, чтобы нарисовал простую форму:

чтобы можно заполнить изображение с синим цветом Я нарисовал прямоугольник Fill, так что это правда?

Код для формы для перед заполнением:

var canvas3 = document.getElementById('canvas3'); 
     var c3 = canvas3.getContext('2d'); 
     c3.fillStyle = 'green'; 
     c3.beginPath(); 
     c3.moveTo(10,30); 
     c3.lineTo(200,30); 
     c3.moveTo(10,80); 
     c3.lineTo(200,80); 
     c3.moveTo(10,30); 
     c3.lineTo(10,180); 
     c3.moveTo(200,30); 
     c3.lineTo(200,180); 
     //c3.closePath(); 
     c3.fill(); 
     c3.lineWidth = 5; 
     c3.strokeStyle = 'orange'; 
     c3.stroke(); 

код для формы после заливки:

var canvas3 = document.getElementById('canvas3'); 
     var c3 = canvas3.getContext('2d'); 
     c3.fillStyle = 'blue'; 
     c3.beginPath(); 
     c3.moveTo(10,30); 
     c3.fillRect(10,30,190,60); 
     c3.moveTo(10,30); 
     c3.lineTo(10,180); 
     c3.moveTo(10,90); 
     c3.lineTo(200,90); 
     c3.moveTo(200,30); 
     c3.lineTo(200,180); 
     c3.moveTo(10,30); 
     c3.lineTo(200,30); 
     //c3.closePath(); 
     c3.fill(); 
     c3.lineWidth = 5; 
     c3.strokeStyle = 'orange'; 
     c3.stroke(); 

и, наконец, который является лучшим способом я могу рисовал фигуры, как это? Примечание: Im новый на холсте html5, и я читаю от this online book.

Answer 1

Есть ли способ, который можно определить на экране, чтобы заполнить форму? или делать что я больше всего использовать или нарисовал еще одну реальную форму в том же блоке, как слой

Просто нарисуйте фигуру, в том же месте. Заполните сначала, затем погладьте потом. Может потребоваться небольшое планирование с холстом относительно того, в каком порядке рисовать вещи.

может определять объекты для хранения геометрических данных, если вы планируете часто перерисовывать или перемещать их. Это, безусловно, упростит задачу позже.

, который является лучшим способом для рисования таких форм?

На мой взгляд, этот код можно сделать намного проще и в меньшем количестве кодов. Нет необходимости разбивать фигуру в нескольких частях, как в этом коде, если вы можете нарисовать фигуру с помощью простого метода для нее. В этом случае четыре строки могут быть заменены одним прямоугольником.

Знание того, как эти формы нарисованы внутри, также помогает, поэтому мы можем использовать путь rect() листьев, то есть закрытие в верхнем левом углу, чтобы мы могли продолжить оттуда.

Например:

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

 
// fill blue box first as it will be at the bottom 
 
c3.rect(10, 30, 190, 50); // x, y, width, height 
 
c3.fillStyle = 'blue'; 
 
c3.fill(); 
 

 
// orange stroke 
 
// we know rect() will close at upper-left corner so continue from there with left leg 
 
c3.lineTo(10, 180); 
 
c3.moveTo(200, 80);  // create second leg at right separately 
 
c3.lineTo(200, 180); 
 

 
c3.strokeStyle = "orange"; 
 
c3.lineWidth = 5; 
 
c3.lineJoin = c3.lineCap = "round"; 
 
c3.stroke();

<canvas id=c height=180></canvas>

Альтернативный подход будет заполнить затем построить путь линии:

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

 
c3.fillStyle = 'blue'; 
 
c3.fillRect(10, 30, 190, 50); // fillRect does not add to path 
 

 
// orange stroke 
 
c3.moveTo(10, 180);   // create "housing" starting at bottom-left corner 
 
c3.lineTo(10, 30);   // upper-left 
 
c3.lineTo(200, 30);   // upper-right 
 
c3.lineTo(200, 180);   // bottom-right 
 

 
c3.moveTo(10, 80);   // add cross-bar 
 
c3.lineTo(200, 80); 
 

 
c3.strokeStyle = "orange"; 
 
c3.lineWidth = 5; 
 
c3.lineJoin = c3.lineCap = "round"; 
 
c3.stroke();

<canvas id=c height=180></canvas>