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标签吧希望这种思路能帮到你