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标签吧

希望这种思路能帮到你