Question

我需要在html5中使用canvas绘制一个圆圈。

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

0-30％它应该是红色的 30-60％它应该有橙色 60-100％它应该是绿色的。

我检查了多个解决方案。但我无法找到合适的人。

此外，还应该使用IE8。

我打算使用excanvas。

请为此建议解决方案

Answer 1

你不能在IE8中使用canvas，但我为IE8做了div的后备。

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

http://jsbin.com/yoqute（在IE8中试试这个小提琴）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

HTML5 Canvas Circle有三种不同的颜色

1 个答案: