获取"无法读取部分 HTML 中空的属性'getContext'

Question

我正在画布元素中构建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也存在，但它的存在只是为了加载插件和依赖项。

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

Answer 1

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

您遇到的问题可能是因为在首次命中控制器后加载页面的部分，因此找不到该元素。 var canvas = document.getElementById("picker");返回 null 是因为它找不到元素，因此getContext将不起作用。