HTML5 Canvas 三种不同颜色的圆圈

Question

我需要在 html5 中使用 canvas 画一个圆。

圆应该根据百分比具有三种不同的颜色。

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

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

更多内容应该也适用于 IE8。

我打算使用 excanvas。

请为此提出解决方案

Answer 1

您不能在 IE8 中使用 canvas，但我为 IE8 使用 div 进行了回退。

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

http://jsbin.com/yoqute（在 IE8 中试试 fiddle）

$('#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>

HTML5 Canvas 三种不同颜色的圆圈

HTML5 Canvas Circle with three different colors

html

javascript

canvas

internet-explorer-8