尝试从画布使用 getContext('2d') 时出现类型错误

Question

当我尝试在我的 el.canvas Obj 上输入 getContext 时，为什么会出现类型错误 html:

//created a directive called canvas-video-map
<div id="video-to-canvas" canvas-video-map>

  <video id="menu-video" loop autoplay video-loader preload="auto">
    <source src="../../images/clouds.mp4" type="video/mp4">
  </video>

  <canvas id='menu-canvas'></canvas>
</div>

JS：

.directive('canvasVideoMap', function() {
return function(scope, element, attrs) {
    angular.element(document).ready(function() {
        //findes and maps the element children (video and canvas)
        var el = {
            video:    element.find('video'),
            canvas:   element.find('canvas')
        };
        console.log(el.canvas);
         // Type error is from here when i try to getContext
        var context = el.canvas.getContext('2d');




    }, false);
  };
});

Answer 1

element.find('canvas')

返回一个数组。使用

el.canvas[0].getContext('2d')

Answer 2

我们需要这样给予

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