Question

我有这个plunker，我试图使用angularjs制作多个方形。我在html页面中使用了<canvas>个标签。

我有一个函数calc()，其中我将每次迭代的高度和宽度值减少一半。目标是绘制一系列正方形，其中每个正方形都在前一个正方形内绘制。每个儿童广场必须是其父母的高度和宽度的一半，并且水平和垂直居中。

我不知道如何继续在代码中绘制循环中的剩余方块

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Answer 1

这样的事情？（可能效率更高，但我试图保持原有结构）

<script>
    var app = angular.module('keycount', []);
    app.controller('keycountcontroller', function($scope, $log, $http) {
      $scope.width = 500;
      $scope.height = 500;

      $scope.calc = function() {
        var x = $scope.width;
        var y = $scope.height;
        var parent = $('#myCanvas');
        while (x > 1) {
          x = x / 2;
          y = y / 2;
          var child = $(parent).clone(false)[0];
          $(child).css('width', x);
          $(child).css('height', y);
          $(child).css('position', 'relative');
          $(child).css('top', y/2);
          $(child).css('left', x/2);
          $(parent).append(child);
          parent = child;
          //alert(x);
        }
      }

      $scope.calc();
    });
  </script>
</head>

<body ng-controller="keycountcontroller">
  <div id="myCanvas" style="border:1px solid #000000; width:{{width}}px; height:{{height}}px;"></div>
</body>

首先，我认为使用指令会使它更好，绝对更令人印象深刻，但效率不高。相反，这是一个更紧凑的版本：

<script>
    var app = angular.module('keycount', []);
    app.controller('keycountcontroller', function($scope, $timeout) {
      $scope.width = 300;
      $scope.height = 300;

      $scope.calc = function() {
        var x = $scope.width;
        var y = $scope.height;
        var parent = $('#myCanvas');
        while (x > 1) {
          var child = $(parent).clone(false).css({ width: x = x / 2, height: y = y / 2, position: 'relative', top: x/2, left: y/2 });
          $(parent).append(child);
          parent = child;
        }
      }
    });
  </script>
</head>

<body ng-controller="keycountcontroller" ng-init="calc()">
  <div id="myCanvas" style="border:1px solid #000000; width:{{width}}px; height:{{height}}px;"></div>
</body>

使用angularjs和canvas标签在另一个方块内绘制正方形

1 个答案: