Javascript 获得；无法读取属性'；getContext'；在部分HTML中使用null

我正在画布元素中构建HTML5色轮。我使用AngularJS生成单个页面。使用在单独文件中生成画布的源代码，我认为可以，因为HTML的

索引

引用了它。由于这失败了（得到上面的错误），我求助于将它放在一个JavaScript文件中，作为这个HTML部分的控制器。我最终得到了完全相同的错误

下面是部分的AngularJS：

'use strict';

angular.module('careApp.tMain', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/tMain', {
    templateUrl: './templates/tMain.html',
    controller: 'tMainCtrl'
  });
}])

.controller('tMainCtrl', function($scope, $http) {
      //Draw color wheel inside canvas
      var canvas = document.getElementById("picker");
      var context = canvas.getContext("2d");
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 100;
      var counterClockwise = false;

      for(var angle=0; angle<=360; angle+=1){
        var startAngle = (angle-2)*Math.PI/180;
        var endAngle = angle * Math.PI/180;
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.closePath();
        var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
        gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)');
        gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)');
        context.fillStyle = gradient;
        context.fill();
      }
  $scope.dimmer = 100;
});

index.html

包含所有外部脚本和包含其中每个部分的主div。主应用程序JS也存在，但它的存在只是为了加载插件和依赖项

---

这是否设置不正确？是否需要尝试其他方法？

您应该为画布元素创建一个指令，然后在指令链接功能中，您可以直接访问该元素，而不使用id

---

您遇到的问题可能是因为第一次点击控制器后，页面的部分内容正在加载，因此无法找到该元素<代码>var canvas=document.getElementById（“选择器”）返回null，因为它找不到元素，因此

getContext

将不起作用。

您应该为画布元素创建一个指令，然后在指令链接函数中您可以直接访问元素，而不使用id

---

您遇到的问题可能是因为第一次点击控制器后，页面的部分内容正在加载，因此无法找到该元素<代码>var canvas=document.getElementById（“选择器”）返回null，因为它找不到元素，因此

getContext

将无法工作。

这是我的怀疑-感谢您对该指令的帮助！这就是我的怀疑——谢谢你对指导思想的帮助！你能发布一个有效的解决方案吗

<canvas id="picker" width="150" height="150"></canvas>