HTML5 Canvas Circle with three different colors

Question

我需要在html5中使用畫布繪製一個圓。

根據百分比，Circle應該有三種不同的顏色。

0-30％它應該有紅色 爲30-60％它應該有橙色 爲60-100％它應該有綠色。

我檢查了多個解決方案。但我無法找到一個適當的。

更重要的是，這應該與IE8一起工作。

我打算使用excanvas。

請提出這個

Answer 1

不能在IE8使用畫布解決方案，但我做了一個回退與div爲IE8。

這不完全是你想要的風格，但它的方向。

http://jsbin.com/yoqute（嘗試在IE8這個小提琴）

$('#test').corner('50px'); 
 

 
if (isCanvasSupported()) { 
 
    var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 
    var centerX = canvas.width/2; 
 
    var centerY = canvas.height/2; 
 
    var radius = 70; 
 
    
 
    var grd=context.createLinearGradient(0,0,0,100); 
 
    grd.addColorStop(0,"red"); 
 
    grd.addColorStop(0.7,"orange"); 
 
    grd.addColorStop(1,"green"); 
 
    
 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
 
    context.fillStyle = grd; 
 
    context.fill(); 
 
} 
 

 
function isCanvasSupported(){ 
 
    var elem = document.createElement('canvas'); 
 
    return !!(elem.getContext && elem.getContext('2d')); 
 
}

#test { 
 
    width:100px; 
 
    height:100px; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00',GradientType=0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://malsup.github.io/jquery.corner.js"></script> 
 

 
<canvas id="myCanvas"> 
 
    <div id="test"></div> 
 
</canvas>