Javascript 三种不同颜色的HTML5画布圆圈

我需要用html5中的画布画一个圆圈

根据百分比，圆圈应有三种不同的颜色

对于0-30%，应为红色 30-60%应该是橙色的 对于60-100%，它应该是绿色的

我已经检查了多种解决方案。但是我找不到一个合适的

更多关于这一点的信息也应该适用于IE8

我计划使用excanvas

---

请为此提供解决方案您不能在IE8中使用canvas，但我为IE8使用了

div

这不完全是你想要的风格，而是方向

（在IE8中试试这把小提琴）

$（“#测试”）.corner（'50px'）；
如果（isCanvasSupported（））{
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var grd=context.createLinearGradient（0,0,0100）；
grd.ADDCORSTOP（0，“红色”）；
grd.addColorStop（0.7，“橙色”）；
grd.addColorStop（1，“绿色”）；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle=grd；
context.fill（）；
}
函数isCanvasSupported（）{
var elem=document.createElement（'canvas'）；
return！！（elem.getContext&&elem.getContext（'2d'）；
}

#测试{
宽度：100px；
高度：100px；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#FF0000'，endColorstr='#00FF00'，GradientType=0）；
}

您能粘贴到目前为止您尝试过但不起作用的代码吗？不幸的是，IE8不支持画布，为什么您需要画布？你可以使用普通div！投票支持灵活的解决方案。但是，我感到困惑……我阅读了这个问题，因为用户需要一个圆圈，如果javascript百分比为0-30%，圆圈将是完全红色的；如果javascript百分比为31-60%，圆圈将是完全橙色的；如果javascript百分比为61-100%，圆圈将是完全绿色的：-//@马克：好的。我不这么认为，但也许你会写。也许，因为Karthikeyan要求画布解决方案，而您理解的问题根本不需要画布。