将 html canvas 放入 table 个单元格

Question

我有一个table。我试图在计数框列内显示我创建的 html canvas。我有 10 条记录，所以 canvas 应该在 table 中显示 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>

canvas 输出是 10 个计数框。

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

Answer 1

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

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

将 html canvas 放入 table 个单元格

place html canvas in table cells

html

angularjs

html5-canvas