用javascript填充路径_Javascript_Html_Canvas

用javascript填充路径

javascript html canvas

用javascript填充路径,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试使用矩形和路径线为网页创建一个可视图形。这一切都完成了，现在我希望颜色顶部的一种颜色，底部的另一种。我试着让整个东西变成红色，并用绿色覆盖底部（我知道这是一个可怕的组合，但它们只是为了测试目的）。它使整个东西变成红色，但我看不到任何绿色。所以我的问题是，我如何能在底部的颜色不同于顶部？ </head> <body> <canvas id="myCanvas" width="600" height="600" style="border:1px

我正在尝试使用矩形和路径线为网页创建一个可视图形。这一切都完成了，现在我希望颜色顶部的一种颜色，底部的另一种。我试着让整个东西变成红色，并用绿色覆盖底部（我知道这是一个可怕的组合，但它们只是为了测试目的）。它使整个东西变成红色，但我看不到任何绿色。所以我的问题是，我如何能在底部的颜色不同于顶部？

</head>
<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #D3D3D3;">Your browser does not support the HTML5 canvas tag.                 </canvas>
    <script>
        var theCanvas=document.getElementById("myCanvas");
        var theContext=theCanvas.getContext("2d");
        var rectangle=theCanvas.getContext("2d");

        var sales = new Array();
        sales[0] = 52;
        sales[1] = 48;
        sales[2] = 74;
        sales[3] = 31;
        sales[4] = 47;
        sales[5] = 25;
        sales[6] = 67;
        sales[7] = 78;
        sales[8] = 45;
        sales[9] = 75;
        sales[10] = 85;

        var scalar = 10;
        var width = 10;
        var height = 10;
        var spacing = 10
        var y = height * scalar;

        rectangle.rect(0, 0, (width * scalar), y);
        rectangle.fillStyle="red";
        rectangle.fill();
        rectangle.stroke();

        theContext.beginPath();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.stroke();
        for(var i = -1; i < sales.length; ++i)
        {
            theContext.moveTo((spacing * i), (y - sales[i]));
            theContext.lineTo(spacing * (i + 1), (y - sales[i + 1]));
            theContext.stroke();
        }
        theContext.moveTo((width * scalar), (y - sales[10]));
        theContext.lineTo((width * scalar), y);
        theContext.stroke();
        theContext.moveTo((width * scalar), y);
        theContext.lineTo(0, y);
        theContext.stroke();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.closePath();
        theContext.fillStyle="green";//doesn't seem to work!
        theContext.fill();
        theContext.stroke();
    </script>
</body>


您的浏览器不支持HTML5画布标记。
var theCanvas=document.getElementById（“myCanvas”）；
var theContext=theCanvas.getContext（“2d”）；
var矩形=canvas.getContext（“2d”）；
var sales=新数组（）；
销售额[0]=52；
销售额[1]=48；
销售额[2]=74；
销售额[3]=31；
销售额[4]=47；
销售额[5]=25；
销售额[6]=67；
销售额[7]=78；
销售额[8]=45；
销售额[9]=75；
销售额[10]=85；
var标量=10；
var宽度=10；
var高度=10；
变量间距=10
变量y=高度*标量；
矩形.rect（0,0，（宽度*标量），y）；
矩形。fillStyle=“红色”；
矩形填充（）；
stroke（）；
context.beginPath（）；
context.moveTo（0，y）；
context.lineTo（0，（y-sales[0]）；
context.stroke（）；
对于（变量i=-1；i


代码正在分解多边形，因为它使用了太多的moveTo（）
。如果你把路径分开，就不会有任何东西需要填充，因为只剩下非连续的线条
</head>
<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #D3D3D3;">Your browser does not support the HTML5 canvas tag.                 </canvas>
    <script>
        var theCanvas=document.getElementById("myCanvas");
        var theContext=theCanvas.getContext("2d");
        var rectangle=theCanvas.getContext("2d");

        var sales = new Array();
        sales[0] = 52;
        sales[1] = 48;
        sales[2] = 74;
        sales[3] = 31;
        sales[4] = 47;
        sales[5] = 25;
        sales[6] = 67;
        sales[7] = 78;
        sales[8] = 45;
        sales[9] = 75;
        sales[10] = 85;

        var scalar = 10;
        var width = 10;
        var height = 10;
        var spacing = 10
        var y = height * scalar;

        rectangle.rect(0, 0, (width * scalar), y);
        rectangle.fillStyle="red";
        rectangle.fill();
        rectangle.stroke();

        theContext.beginPath();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.stroke();
        for(var i = -1; i < sales.length; ++i)
        {
            theContext.moveTo((spacing * i), (y - sales[i]));
            theContext.lineTo(spacing * (i + 1), (y - sales[i + 1]));
            theContext.stroke();
        }
        theContext.moveTo((width * scalar), (y - sales[10]));
        theContext.lineTo((width * scalar), y);
        theContext.stroke();
        theContext.moveTo((width * scalar), y);
        theContext.lineTo(0, y);
        theContext.stroke();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.closePath();
        theContext.fillStyle="green";//doesn't seem to work!
        theContext.fill();
        theContext.stroke();
    </script>
</body>

尝试这样排除它们：
</head>
<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #D3D3D3;">Your browser does not support the HTML5 canvas tag.                 </canvas>
    <script>
        var theCanvas=document.getElementById("myCanvas");
        var theContext=theCanvas.getContext("2d");
        var rectangle=theCanvas.getContext("2d");

        var sales = new Array();
        sales[0] = 52;
        sales[1] = 48;
        sales[2] = 74;
        sales[3] = 31;
        sales[4] = 47;
        sales[5] = 25;
        sales[6] = 67;
        sales[7] = 78;
        sales[8] = 45;
        sales[9] = 75;
        sales[10] = 85;

        var scalar = 10;
        var width = 10;
        var height = 10;
        var spacing = 10
        var y = height * scalar;

        rectangle.rect(0, 0, (width * scalar), y);
        rectangle.fillStyle="red";
        rectangle.fill();
        rectangle.stroke();

        theContext.beginPath();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.stroke();
        for(var i = -1; i < sales.length; ++i)
        {
            theContext.moveTo((spacing * i), (y - sales[i]));
            theContext.lineTo(spacing * (i + 1), (y - sales[i + 1]));
            theContext.stroke();
        }
        theContext.moveTo((width * scalar), (y - sales[10]));
        theContext.lineTo((width * scalar), y);
        theContext.stroke();
        theContext.moveTo((width * scalar), y);
        theContext.lineTo(0, y);
        theContext.stroke();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.closePath();
        theContext.fillStyle="green";//doesn't seem to work!
        theContext.fill();
        theContext.stroke();
    </script>
</body>


</head>
<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #D3D3D3;">Your browser does not support the HTML5 canvas tag.                 </canvas>
    <script>
        var theCanvas=document.getElementById("myCanvas");
        var theContext=theCanvas.getContext("2d");
        var rectangle=theCanvas.getContext("2d");

        var sales = new Array();
        sales[0] = 52;
        sales[1] = 48;
        sales[2] = 74;
        sales[3] = 31;
        sales[4] = 47;
        sales[5] = 25;
        sales[6] = 67;
        sales[7] = 78;
        sales[8] = 45;
        sales[9] = 75;
        sales[10] = 85;

        var scalar = 10;
        var width = 10;
        var height = 10;
        var spacing = 10
        var y = height * scalar;

        rectangle.rect(0, 0, (width * scalar), y);
        rectangle.fillStyle="red";
        rectangle.fill();
        rectangle.stroke();

        theContext.beginPath();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.stroke();
        for(var i = -1; i < sales.length; ++i)
        {
            theContext.moveTo((spacing * i), (y - sales[i]));
            theContext.lineTo(spacing * (i + 1), (y - sales[i + 1]));
            theContext.stroke();
        }
        theContext.moveTo((width * scalar), (y - sales[10]));
        theContext.lineTo((width * scalar), y);
        theContext.stroke();
        theContext.moveTo((width * scalar), y);
        theContext.lineTo(0, y);
        theContext.stroke();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.closePath();
        theContext.fillStyle="green";//doesn't seem to work!
        theContext.fill();
        theContext.stroke();
    </script>
</body>

theContext.beginPath();
theContext.moveTo(0, y);
theContext.lineTo(0, (y - sales[0]));
//theContext.stroke();
for(var i = -1; i < sales.length; ++i)
{
    //theContext.moveTo((spacing * i), (y - sales[i]));
    theContext.lineTo(spacing * (i + 1), (y - sales[i + 1]));
    //theContext.stroke();
}
//theContext.moveTo((width * scalar), (y - sales[10]));
theContext.lineTo((width * scalar), y);
theContext.stroke();

//theContext.moveTo((width * scalar), y);
theContext.lineTo(0, y);
//theContext.stroke();
//theContext.moveTo(0, y);
theContext.lineTo(0, (y - sales[0]));
theContext.closePath();
theContext.fillStyle="green";  //works!
theContext.fill();
theContext.stroke();

context.beginPath（）；
context.moveTo（0，y）；
context.lineTo（0，（y-sales[0]）；
//context.stroke（）；
对于（变量i=-1；i

或清理：
</head>
<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #D3D3D3;">Your browser does not support the HTML5 canvas tag.                 </canvas>
    <script>
        var theCanvas=document.getElementById("myCanvas");
        var theContext=theCanvas.getContext("2d");
        var rectangle=theCanvas.getContext("2d");

        var sales = new Array();
        sales[0] = 52;
        sales[1] = 48;
        sales[2] = 74;
        sales[3] = 31;
        sales[4] = 47;
        sales[5] = 25;
        sales[6] = 67;
        sales[7] = 78;
        sales[8] = 45;
        sales[9] = 75;
        sales[10] = 85;

        var scalar = 10;
        var width = 10;
        var height = 10;
        var spacing = 10
        var y = height * scalar;

        rectangle.rect(0, 0, (width * scalar), y);
        rectangle.fillStyle="red";
        rectangle.fill();
        rectangle.stroke();

        theContext.beginPath();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.stroke();
        for(var i = -1; i < sales.length; ++i)
        {
            theContext.moveTo((spacing * i), (y - sales[i]));
            theContext.lineTo(spacing * (i + 1), (y - sales[i + 1]));
            theContext.stroke();
        }
        theContext.moveTo((width * scalar), (y - sales[10]));
        theContext.lineTo((width * scalar), y);
        theContext.stroke();
        theContext.moveTo((width * scalar), y);
        theContext.lineTo(0, y);
        theContext.stroke();
        theContext.moveTo(0, y);
        theContext.lineTo(0, (y - sales[0]));
        theContext.closePath();
        theContext.fillStyle="green";//doesn't seem to work!
        theContext.fill();
        theContext.stroke();
    </script>
</body>

theContext.beginPath();
theContext.moveTo(0, y);
theContext.lineTo(0, (y - sales[0]));

for(var i = -1; i < sales.length; ++i) {
    theContext.lineTo(spacing * (i + 1), (y - sales[i + 1]));
}
theContext.lineTo((width * scalar), y);
theContext.stroke();

theContext.lineTo(0, y);
theContext.lineTo(0, (y - sales[0]));
theContext.closePath();
theContext.fillStyle="green";  //works!
theContext.fill();
theContext.stroke();

context.beginPath（）；
context.moveTo（0，y）；
context.lineTo（0，（y-sales[0]）；
对于（变量i=-1；i
谢谢！我没有意识到移动它会使它破裂，但我认为它从最后一个抽签点继续进行会更有意义。