angularjs 指令中的简单 canvas

Question

我在尝试使指令与 canvas 一起工作时遇到困难（可能是犯了一些愚蠢的错误）。

当我执行我的代码时，我得到一个 element.getContext is not a function 这看起来很奇怪，因为我的元素实际上是一个 HTMLCanvasElement。

这是我的指令

.directive('pitchCanvas', function() {

    function link(scope, element, attrs) {
        console.info('element: ' + element);
        var ctx = element.getContext('2d');
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
    }

  return {
    restrict: 'E',
    replace: true,
    scope: true,
    link: link,
    template: '<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>'
  };
})

这是一个fiddle，我在其中放置了我的代码的简化版本，但无法运行。

任何帮助将不胜感激。

Answer 1

你应该替换：

element.getContext('2d');

与：

element[0].getContext('2d');

angularjs 指令中的简单 canvas

Simple canvas in angularjs directive

html5-canvas

angularjs