Почему эта фигура не заполняется ()? - PullRequest
Новая
       71

Почему эта фигура не заполняется ()?

1 голос
/ 14 июля 2020

Почему я не могу заполнить () эту форму? В чем проблема? stroke () работает, но не fill ().

https://jsfiddle.net/KriegersVan/2fm8oyzv/22/

Спасибо за вашу помощь!

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

 var visibleCtx = document.getElementById("canvas").getContext("2d");
 var bottomCirclesY = window.innerHeight * 0.50;
 var bottomCirclesX = [
    window.innerWidth / 4,
    window.innerWidth / 2,
    window.innerWidth - (window.innerWidth / 4)
 ];
 var topCircleY = window.innerHeight * 0.20;
 var topCircleLeftX = (window.innerWidth / 2) - (window.innerWidth * 0.17);
 var topCircleRightX = (window.innerWidth / 2) + (window.innerWidth * 0.17);
 var bottomLeftCircleLeftX = bottomCirclesX[0] - (window.innerWidth * 0.08);
 var bottomLeftCircleRightX = bottomCirclesX[0] + (window.innerWidth * 0.08);
 var halfwayBetweenTopAndBottomY = topCircleY + ((bottomCirclesY - topCircleY) / 2);
 var bottomMiddleCircleLeftX = bottomCirclesX[1] - (window.innerWidth * 0.08);
 var bottomMiddleCircleRightX = bottomCirclesX[1] + (window.innerWidth * 0.08);
 var bottomRightCircleLeftX = bottomCirclesX[2] - (window.innerWidth * 0.08);
 var bottomRightCircleRightX = bottomCirclesX[2] + (window.innerWidth * 0.08);

 visibleCtx.beginPath();
 //Draw left tube:
 //Draw left line:
 visibleCtx.moveTo(
    topCircleLeftX,
    topCircleY);
 visibleCtx.lineTo(
    bottomLeftCircleLeftX,
    bottomCirclesY);
 //Draw right line:
 visibleCtx.moveTo(
    topCircleLeftX + (window.innerWidth * 0.08),
    halfwayBetweenTopAndBottomY);
 visibleCtx.lineTo(
    bottomLeftCircleRightX,
    bottomCirclesY);
 //Draw center tube:
 //Draw left line:
 visibleCtx.moveTo(
    bottomMiddleCircleLeftX,
    halfwayBetweenTopAndBottomY);
 visibleCtx.lineTo(
    bottomMiddleCircleLeftX,
    bottomCirclesY);
 //Draw right line:
 visibleCtx.moveTo(
    bottomMiddleCircleRightX,
    halfwayBetweenTopAndBottomY);
 visibleCtx.lineTo(
    bottomMiddleCircleRightX,
    bottomCirclesY);
 //Draw right tube:
 //Draw left line:
 visibleCtx.moveTo(
    topCircleRightX - (window.innerWidth * 0.08),
    halfwayBetweenTopAndBottomY);
 visibleCtx.lineTo(
    bottomRightCircleLeftX,
    bottomCirclesY);
 //Draw right line:
 visibleCtx.moveTo(
    topCircleRightX,
    topCircleY);
 visibleCtx.lineTo(
    bottomRightCircleRightX,
    bottomCirclesY);
 //Connect the lines:
 //Draw left connector:
 visibleCtx.moveTo(
    topCircleLeftX + (window.innerWidth * 0.08),
    halfwayBetweenTopAndBottomY);
 visibleCtx.lineTo(
    bottomMiddleCircleLeftX,
    halfwayBetweenTopAndBottomY);
 //Draw right connector:
 visibleCtx.moveTo(
    topCircleRightX - (window.innerWidth * 0.08),
    halfwayBetweenTopAndBottomY);
 visibleCtx.lineTo(
    bottomMiddleCircleRightX,
    halfwayBetweenTopAndBottomY);
 //Connect the top lines:
 visibleCtx.moveTo(
    topCircleLeftX,
    topCircleY);
 visibleCtx.lineTo(
    topCircleRightX,
    topCircleY);
 //Connect the bottom lines
 //Draw the left tube line:
 visibleCtx.moveTo(
    bottomLeftCircleLeftX,
    bottomCirclesY);
 visibleCtx.lineTo(
    bottomLeftCircleRightX,
    bottomCirclesY);
 //Draw the center tube line:
 visibleCtx.moveTo(
    bottomMiddleCircleLeftX,
    bottomCirclesY);
 visibleCtx.lineTo(
    bottomMiddleCircleRightX,
    bottomCirclesY);
 //Draw the right tube line:
 visibleCtx.moveTo(
    bottomRightCircleLeftX,
    bottomCirclesY);
 visibleCtx.lineTo(
    bottomRightCircleRightX,
    bottomCirclesY);

 visibleCtx.fillStyle = "#18dbd8";
 visibleCtx.lineJoin = "round";
 visibleCtx.strokeStyle = "#ffffff";
 visibleCtx.fill();
 visibleCtx.stroke();
 visibleCtx.closePath();

1 Ответ

1 голос
/ 14 июля 2020

Если вы оставите какие-либо пробелы, это не сработает, я думаю, вам не нужно "moveTo" на ваших фигурах.

с этим в начале обоих 

visibleCtx.beginPath();

Попробуйте этот небольшой фрагмент 

        visibleCtx.moveTo(
            topCircleLeftX,
            topCircleY
        );
        visibleCtx.lineTo(
            bottomLeftCircleLeftX,
            bottomCirclesY
        );
        //Draw right line:
        visibleCtx.moveTo(
            topCircleLeftX+(window.innerWidth*0.08),
            halfwayBetweenTopAndBottomY
        );
        visibleCtx.lineTo(
            bottomLeftCircleRightX,
            bottomCirclesY
        );

vs 

        visibleCtx.moveTo(
            topCircleLeftX,
            topCircleY
        );
        visibleCtx.lineTo(
            bottomLeftCircleLeftX,
            bottomCirclesY
        );
        //Draw right line:
        visibleCtx.lineTo(
            topCircleLeftX+(window.innerWidth*0.08),
            halfwayBetweenTopAndBottomY
        );
        visibleCtx.lineTo(
            bottomLeftCircleRightX,
            bottomCirclesY
        );

поместите его в конец обоих 

visibleCtx.fillStyle = "#18dbd8";
visibleCtx.lineJoin = "round";
visibleCtx.strokeStyle = "#ffffff";
visibleCtx.fill();
visibleCtx.stroke();
visibleCtx.closePath();

, чтобы увидеть разницу. Один оставляет зазоры, другой - нет. Я думаю, это потому, что каждый moveTo является отдельной формой от fill().

...