canvas.getContext 不是函数答案

【问题标题】：canvas.getContext is not a functioncanvas.getContext 不是函数
【发布时间】：2016-10-25 21:05:24
【问题描述】：

我已经为 AngularJs 指令编写了一个简单的模板：

<div class="circle">
    <canvas></canvas>
</div>

我的指令如下所示：

MobileApp.directive('circle', function () {
    return {
        restrict: 'E',
        scope: true,
        link: function (scope, elem, attrs) {
            ...
            var canvas = elem.find('canvas');
            var ctx = canvas.getContext('2d');
            ...
        }
    }
});

而且它的用法很简单：

<circle/>

尝试调用方法getContext('2d')时出现错误：

TypeError: canvas.getContext 不是函数

canvas 实例被选中，它的 JSON 表示看起来

{
  "0": {},
  "length": 1,
  "prevObject": {
    "0": {},
    "context": {},
    "length": 1
  },
  "context": {},
  "selector": "canvas"
}

我已经在这里阅读了所有相关问题，但尚未找到答案。任何帮助，将不胜感激。谢谢。

【问题讨论】：

标签： javascript angularjs html angularjs-directive html5-canvas

【解决方案1】：

我创建a little plunker。在您的示例中，我不了解指令和模板之间的关系。您是否缺少添加模板属性？我在 plunker 做什么：

定义模板：

return {
    restrict: 'E',
    scope: true,
    template: '<div><canvas></canvas></div>',
    link: function (scope, elem, attrs) {
        var canvas = elem.find('canvas');
        console.log(canvas);
        var ctx = canvas[0].getContext('2d');
        console.log(canvas, ctx);
    }
}

从 find 方法返回的对象中获取画布：

var ctx = canvas[0].getContext('2d');

以及使用：

<circle></circle>

【讨论】：

我正在使用templateUrl: '/tabs/home/circle/circle.tmpl.html'
好的，那就用canvas[0].getContext('2d');
当我通过alert(JSON.stringify(elem.find('canvas')[0])) 打印出来时，我收到了{}，但是当我使用你的方式时，它工作正常
我认为 dom 元素没有 json 表示。不要在元素上使用 JSON.stringify。使用 elem.find('canvas')[0].toString() 结果将是 [object HTMLCanvasElement]
我会知道的，你为我节省了几个小时（我是前端开发的新手），谢谢

【解决方案2】：

替换var canvas = elem.find('canvas'); var canvas = elem.find('canvas')[0];

【讨论】：