使用 AngularJS 创建 html 画布元素答案

【问题标题】：to create html canvas elements using AngularJS使用 AngularJS 创建 html 画布元素
【发布时间】：2016-09-09 04:10:36
【问题描述】：

我想使用 angularJS 在 html 画布中创建一些圆圈。我知道如何使用 javascript 来做同样的事情，但我是 angularJS 的新手，非常感谢任何帮助。

代码：

<title>Home Page</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>



</head>

<body>

<div  ng-app="myapp" ng-controller="myctrl">
<canvas id="canvas" width="2100" height="900" 
    style="border: 1px solid #d3d3d3;">
</canvas>
</div>
<script>

var $scope;
var app = angular.module('myapp', []);
myapp.controller("myctrl", function($scope){
var c1 = document.getElementById("canvas");
var ctx = c1.getContext("2d");
ctx.beginPath();
ctx.arc(500, 500, 50, 0, 2 * Math.PI, false);
ctx.lineWidth = 0.2;
ctx.stroke();
ctx.fill();
})

</script>
</body>

【问题讨论】：

您好，请查看链接：github.com/ActivKonnect/angular-circles 也htmlpreview.github.io/?https://github.com/ActivKonnect/…
非常感谢您的帮助.. 但我想知道是否有办法使用我的代码。

标签： angularjs html5-canvas

【解决方案1】：

实际上您的代码有效。主要问题是您试图通过错误的变量（myapp 而不是app）访问您的角度应用程序。这是运行您的代码的jsbin。

但是在控制器中更改 DOM 是 bad practice。使用 directive 访问 DOM 对象。

我用指令创建了一个简单的example。

app.directive('drawCircle', function() {
return {
  scope: {
    x: '@x',
    y: '@y'
  },
  link: function(scope, element, attrs) {
    var x = parseInt(scope.x);
    var y = parseInt(scope.y);
    var canvas = element.parent();
    var ctx = canvas[0].getContext("2d");
    ctx.beginPath();
    ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
    ctx.lineWidth = 0.2;
    ctx.stroke();
    ctx.fill();
  }
}
});

该指令采用两个参数来设置画布中圆圈的位置：

<canvas id="canvas" width="2100" height="900" style="border: 1px solid #d3d3d3;">
  <draw-circle x="500" y="500"></draw-circle>
  <draw-circle x="200" y="500"></draw-circle>
</canvas>

这将在画布内绘制两个圆圈。希望这会有所帮助。

【讨论】：

您忘记在<canvas> 标签中包含drawCircle。