时间戳

首页 > 解决方案 > 为什么这个形状不填充（）？

javascript - 为什么这个形状不填充（）？

问题描述

为什么我不能填充（）这个形状？有什么问题？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();

标签： javascriptcanvashtml5-canvas

解决方案

如果你留下任何间隙，它似乎不起作用，我认为你不需要在你的形状上“移动到”。

在这两者的开头

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
        );

对比

        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()。

推荐阅读