Question

我正在canvas元素中构建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，您需要知道的是partial有以下canvas元素：

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

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

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

Answer 1

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

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

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

1 个答案: