Question

所以，我有一些js代码来绘制一个具有指定百分比的圆圈，我的问题是我想要用指定的颜色填充空白部分。 Area

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
    <script src="ion.js"></script>
    <canvas data-width="5" data-ringcolor="blue" data-filledcolor="1" data-precentage="90" onclick="createNewChart( this, 40 );">
    </canvas>
</html>

JS：

function createNewChart( elemnt, radius )
{
    if( elemnt.getAttribute( "data-ringcolor" ) && elemnt.getAttribute( "data-filledcolor" )  && elemnt.getAttribute( "data-precentage" ) && elemnt.getAttribute( "data-width" ) )
    {
        var percentage = Number( elemnt.getAttribute( "data-precentage" ) );

        var ctx = elemnt.getContext( "2d" );
        ctx.beginPath( );
        ctx.arc( 95, 50, radius, 0, ( ( percentage / 100 ) * 2 ) * Math.PI );
        ctx.strokeStyle = elemnt.getAttribute( "data-ringcolor" );
        ctx.lineWidth = Number( elemnt.getAttribute( "data-width" ) );

        ctx.stroke();
    }
    else
    {
        alert( "Missing attribute!" );
    }
}

Answer 1

添加另一条路径：

function createNewChart( elemnt, radius )
{
    if( elemnt.getAttribute( "data-ringcolor" ) && elemnt.getAttribute( "data-filledcolor" )  && elemnt.getAttribute( "data-precentage" ) && elemnt.getAttribute( "data-width" ) )
    {
        var percentage = Number( elemnt.getAttribute( "data-precentage" ) );

        var ctx = elemnt.getContext( "2d" );
        ctx.beginPath( );
        ctx.arc( 95, 50, radius, 0, ( ( percentage / 100 ) * 2 ) * Math.PI );
        ctx.strokeStyle = elemnt.getAttribute( "data-ringcolor" );
        ctx.lineWidth = Number( elemnt.getAttribute( "data-width" ) );

        ctx.stroke();

        ctx.beginPath( );
        ctx.arc( 95, 50, radius, ( percentage / 100 ) * 2 * Math.PI, 2 * Math.PI );
        ctx.strokeStyle = "red";
        ctx.lineWidth = Number( elemnt.getAttribute( "data-width" ) );

        ctx.stroke();
    }
    else
    {
        alert( "Missing attribute!" );
    }
}

画布局部圆

1 个答案: