angularjs指令中的简单画布

前端之家收集整理的这篇文章主要介绍了angularjs指令中的简单画布前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我被困(可能是一些愚蠢的错误)试图用画布制作一个指令.

当我执行我的代码时,我得到一个元素.getContext不是一个看似奇怪的函数,因为我的元素实际上是一个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,我放置了我的代码的简化版本,无法工作.

任何帮助将非常感激.

解决方法

你应该替换:

element.getContext('2d');

附:

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

猜你在找的Angularjs相关文章