在表單元格中放置html canvas

我有一個表格。我正在嘗試在Tally框列中顯示我創建的HTML畫布。我有10條記錄，所以畫布應該在表格內顯示10次。這是我迄今所做的：在表單元格中放置html canvas

var c4 = document.getElementById("c4"); 
 
var c4_context = c4.getContext("2d"); 
 

 
function Vertical_2px_Red() { 
 
for (i=0;i<10;i++){ 
 
c4_context.beginPath(); 
 
c4_context.moveTo(20+i*100, 20); 
 
c4_context.lineTo(100+i*100, 20); 
 

 
c4_context.moveTo(20+i*100, 20); 
 
c4_context.lineTo(20+i*100, 100); 
 

 
c4_context.moveTo(100+i*100, 20); 
 
c4_context.lineTo(100+i*100, 100); 
 

 
c4_context.moveTo(20+i*100, 20); 
 
c4_context.lineTo(100+i*100, 100); 
 

 
c4_context.moveTo(100+i*100, 100); 
 
c4_context.lineTo(20+i*100, 100); 
 
c4_context.strokeStyle = "Red"; 
 
c4_context.stroke(); 
 
} 
 
}

My html form: 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container-table"> 
 
    <table border="1" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <td>{{label.table.cName}}</td> 
 
       <td colspan="2">{{label.table.cVote}}</td> 
 
       <td>{{label.table.cTB}}</td> 
 
       <td>{{label.table.cNV}}</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="(key,value) in candidates[0]"> 
 
       <td>{{value.no}} {{label.table.period}} {{value.name}}</td> 
 
       <td>{{value.votes}}</td> 
 
       <td><canvas id="c4" width="500" height = "200" style="border:solid 1px #000000;"></canvas></td> 
 
       
 

 
       
 
        
 
      </tr> 
 
     </tbody> 
 
</table> 
 
</div>

畫布輸出爲10個理貨盒。

現在，我想將畫布輸出顯示到每行的提示框列。但它不起作用。我做了什麼錯誤。任何答案將不勝感激。謝謝

來源

2015-01-02 Mary

您需要爲每個畫布分配一個唯一的ID，從技術上講，具有相同ID的1個物品是不合法的。使用ng-repeat的值來構建ID。也許value.no，如果這是一個獨特的數字。您需要修改您的JavaScript以獲取適當的上下文並寫入它們。可能會在頁面末尾或頁面加載時執行此操作。

或者更好的方法可能是製作一個包含畫布和必要功能的指令。該指令將負責根據傳入的值創建唯一標識，然後知道如何引用和繪製到上下文中。

來源

2015-01-02 23:57:16 Scott

謝謝Scott： - *，我會嘗試第一個。 – Mary

在表單元格中放置html canvas

回答

相關問題