使用angularjs和canvas標籤在另一個正方形內繪製正方形

我有這個plunker正在嘗試使用angularjs創建多個正方形形狀。我在html頁面中使用<canvas>標籤。使用angularjs和canvas標籤在另一個正方形內繪製正方形

我有一個函數calc()其中我每次迭代減少高度和寬度的一半。目標是繪製一系列正方形，其中每個下一個正方形在前一個正方形內繪製。每個兒童廣場必須是其父母的高度和寬度的一半，並且水平和垂直居中。

我不知道如何在代碼繪製剩餘平方在循環

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

來源

2014-08-28 Abhishek

像這樣繼續嗎？（可能是更有效，但我試圖保持原來的結構）

<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>

來源

2014-08-28 15:48:21 eyalfein

我想知道，你描述的:) – Abhishek 2014-08-28 16:00:42

編輯我的答案更有效的方式。 – eyalfein 2014-08-28 21:08:10

使用angularjs和canvas標籤在另一個正方形內繪製正方形

回答

相關問題