画布局部圆

Canvas partial circle

本文关键字：布局部      更新时间：2023-09-26

所以，我有一些js代码来绘制一个指定百分比的圆圈，我的问题是，我希望空的部分也用指定的颜色填充。面积

下面是我的代码: 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!" );
    }
}

像这样添加另一个路径:

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!" );
    }
}
相关文章：