在表单元格中放置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

回答

相关问题