在部分 HTML 中获取“无法读取 null 的属性‘getContext’答案

【问题标题】：Getting "Cannot read property 'getContext' of null inside partial HTML在部分 HTML 中获取“无法读取 null 的属性‘getContext’
【发布时间】：2016-06-26 22:06:17
【问题描述】：

我正在画布元素中构建 HTML5 色轮。我正在使用 AngularJS 生成单个页面。使用用于在单独文件中生成画布的源代码，我想我会没事的，因为我的 HTML 的 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 也存在，但它的存在只是为了加载插件和依赖项。

是否设置不正确？我需要尝试不同的方法吗？

【问题讨论】：

能否请您发布一个可行的解决方案

标签： javascript angularjs html html5-canvas

【解决方案1】：

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

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

【讨论】：

那是我的怀疑 - 感谢您对指令想法的帮助！