html id名字冲突问题

Question

一般来说，html中id名字不能重复。但是我想要重复一个canvas，我复制了几份相同的html代码，里面有一样的id(会报错).
然后html里改成class名再在JS里用document.getelementsByClassName()声明之后，进行下一步的var context=canvas.getContext("2d");就会报错。如果挨个改id并且声明，代码量会变大，冗余代码会很多。这种情况该怎么办？
代码如下：

html:
<div class="g-div1 fl">
    <canvas id="g-canvas"></canvas>
    <p class="g-p1" id="data"></p>
    <input type="file" id="file" />
    <input type="button" value="读取图像" id="btn"/>
</div>
<div class="g-div1 fl">
    <canvas id="g-canvas"></canvas>
    <p class="g-p1" id="data"></p>
    <input type="file" id="file" />
    <input type="button" value="读取图像" id="btn"/>
</div>

JS:
var canvas=document.getElementById("g-canvas");
    var context=canvas.getContext("2d"); //这里总会说canvas.getContext is not a function.

Answer 1

试试动态创建canvas标签吧

希望这种思路能帮到你

Answer 2

document.getelementsByClassName获取到的是DOM节点数组，不是单个节点，直接对其使用getContext 方法当然是错误的。
这里可以对数组先循环，然后进行canvas操作

Answer 3

为什么不将方法封装起来，动态生成元素的时候动态生成一个id，然后将这个id动态传递到方法中去

Answer 4

目测没有比动态添加元素更好了