帆布偏圈答案

【问题标题】：Canvas partial circle帆布偏圈
【发布时间】：2016-11-01 09:37:43
【问题描述】：

所以，我有一些 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!" );
    }
}

【问题讨论】：

degrees * Math.PI / 180 应该给你弧度，我相信。
360 * percent / 100 应该给你百分比的度数。
This 也可能有帮助。

标签： javascript html canvas

【解决方案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!" );
    }
}

【讨论】：