在部分HTML中获取“无法读取空的属性'getContext‘”

Question

我正在构建一个画布元素中的HTML5色轮。我使用AngularJS生成各个页面。有了在单独文件中生成画布的源代码，我想我会没事的，因为我的index引用它。因为这不能工作(得到上面的错误)，我求助于将它放置在一个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;
});

对于HTML，您需要知道的是，该部分具有以下canvas元素：

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

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

这个设置不对吗？我需要尝试另一种方法吗？

Answer 1

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

您所遇到的问题可能是因为您的页面的部分是在您的控制器第一次被击中之后加载的，因此无法找到该元素。var canvas = document.getElementById("picker");返回null，因为它找不到元素，所以getContext无法工作。