将 html 画布放在表格单元格中答案

【问题标题】：place html canvas in table cells将 html 画布放在表格单元格中
【发布时间】：2015-03-01 02:35:00
【问题描述】：

我有一张桌子。我试图在计数框列中显示我创建的 html 画布。我有 10 条记录，因此画布应在表内显示 10 次。这是我到目前为止所做的：

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 个计数框。

现在，我想将画布输出显示到每行的计数框列。但它不起作用。我犯了什么错误。任何答案将不胜感激。谢谢

【问题讨论】：

标签： html angularjs html5-canvas

【解决方案1】：

一方面，您需要为每个画布指定一个唯一的 ID。从技术上讲，拥有 > 1 个具有相同 ID 的项目是不合法的。使用您的 ng-repeat 值中的某些内容构建 ID。也许 value.no 如果那是一个唯一的数字。您需要修改您的 javascript 以获取适当的上下文并写入它们。可能在页面末尾或页面加载时执行此操作。

或者更好的方法可能是创建一个指令，其中包含您的画布和绘制到其中的必要函数。该指令将负责根据传入的值创建唯一 ID，然后它将知道如何引用和绘制上下文。

【讨论】：

谢谢 Scott :-*，我会尝试第一个。