Javascript 角度画布指令

我试图用一个带有角度指令的画布元素画一个圆——如果我画一个矩形，一切都很好，但是我在画圆时遇到了麻烦。我可以通过控制台记录绘制圆所需的参数，并获得正确的值，但没有渲染任何内容。我添加了内置的$timeout函数，看看这是否能起作用，但没有。任何帮助都将不胜感激

    .directive('circleDraw',['$timeout', function(timer) {
     return {
      restrict: 'A',
      link: function(scope, iElement) {
      var context = iElement[0].getContext('2d');
      var x = iElement.width / 2;
      var y = iElement.height / 2;
      var radius = 90;
      var startAngle = 0 * Math.PI;
      var endAngle;
      var counterClockwise = false;
      var strokeColor;

      function getColor(huh) {
        if (huh <= 49) {
          strokeColor = '#d31f1f';
        } else if (huh <= 74) {
          strokeColor = '#eac11e';
        } else strokeColor = '#59b73c';
        console.log(strokeColor);
        return strokeColor;
      }

      //this test for rectangle works as expected 

      //context.fillStyle = "#FF0000";
      //context.fillRect(20, 20, 150, 150);

      var getDeg = function(inPerc) {
        inPerc = 88;
        var aPerc = (inPerc * 0.02);
        console.log('aPerc = ' + aPerc);
        endAngle = aPerc * Math.PI;
        console.log("end angle = " + endAngle);
        console.log("start angle = " + startAngle);
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 10;
        context.strokeStyle = getColor(inPerc);
        context.stroke();
      }
      timer(getDeg, 0);
    }
  }

指令（'circleDraw'，['$timeout'，函数（计时器）{ 返回{ 限制：“A”， 链接：功能（范围、要素）{ var context=iElement[0]。getContext（'2d'）； var x=iElement.width/2； 变量y=标高高度/2； var半径=90； var startAngle=0*Math.PI； var端角； var逆时针=假； 色差； 函数getColor（huh）{

---

如果（huh您没有正确计算

x

和

y

。请按如下方式修复：

var x = iElement[0].width / 2;
var y = iElement[0].height / 2;

要读取

width/height

属性，您需要使用原始DOM元素，您可以使用

[0]

访问该元素

演示： 顺便说一句，在画布上绘制不需要

$timeout

var x = iElement[0].width / 2;
var y = iElement[0].height / 2;