Блог

Главная - Вопросы по программированию - Заполните промежуток между 2 частичными эллипсами

Заполните промежуток между 2 частичными эллипсами

#javascript #html5-canvas #html2canvas

Вопрос:

У меня есть два полуэллипса, и я пытаюсь заполнить пространство между ними. По какой-то причине «заливка» «скручивается» посередине:

введите описание изображения здесь

 const canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d");

canvas.width = canvas.height = 300;
ctx.ellipse(150, 0, 150, 90, 0, 0, Math.PI);
ctx.ellipse(150, 200, 150, 90, 0, 0, Math.PI);
ctx.fillStyle = "lightgreen";
ctx.fill();
ctx.stroke(); 
 <canvas id="canvas"></canvas>

Любые идеи, как наполнить его так, чтобы он был похож на цилиндр (без дальней стороны сверху)

Ответ №1:

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

 const canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d");

canvas.width = canvas.height = 300;
ctx.ellipse(150, 0, 150, 90,  0, 0, Math.PI);
ctx.ellipse(150, 200, 150, 90, Math.PI, 0, Math.PI, true); //changed
ctx.fillStyle = "lightgreen";
ctx.fill();
ctx.stroke(); 
 <canvas id="canvas"></canvas>
Метки: