gpt4 book ai didi

javascript - Canvas 部分圆

转载 作者:行者123 更新时间:2023-12-03 05:45:20 24 4
gpt4 key购买 nike

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

最佳答案

添加另一个路径,如下所示:

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!" );
}
}

关于javascript - Canvas 部分圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40352953/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com