angularjs指令中的简单画布答案

【问题标题】：Simple canvas in angularjs directiveangularjs指令中的简单画布
【发布时间】：2015-08-04 09:54:04
【问题描述】：

我被卡住了（可能是因为一些愚蠢的错误）试图使指令与画布一起工作。

当我执行我的代码时，我得到一个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，我在其中放置了我的代码的简化版本，但无法正常工作。

任何帮助将不胜感激。

【问题讨论】：

标签： angularjs html5-canvas

【解决方案1】：

你应该替换：

element.getContext('2d');

与：

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

【讨论】：

这是因为元素不是节点，这与使用原生 javascript 查询时得到的不同。它实际上是一个 jqLite 对象（类似于 jQuery 对象）。因此，就像我们将 jquery 对象转换为纯 javascript 对象一样，也必须将其转换为使用 javascript 函数