Javascript HTML5中的多个动态画布

对于一个我正在制作的网站，我将需要多个画布，围绕单个图像形成一个环

我在JSFIDLE中尝试了HTML、CSS和JS，并成功地用单个图像创建了我想要的效果，但是当我复制HTML时，它不会生成第二个画布（或者它正在生成另一个画布，与第一个画布的位置相同？）

上面是我的JSFIDLE，我将如何更改它以使每个图像都与其画布保持一致

var canvas=document.getElementById（'border'）；
var context=canvas.getContext（'2d'）；
var x=58；
变量y=58；
var半径=55；
var startAngle=1.5*Math.PI；
var endAngle=1*Math.PI；
var逆时针=假；
context.beginPath（）；
弧（x，y，半径，0，2*Math.PI，false）；
context.lineWidth=3；
//线条颜色
context.strokeStyle='#ebebebeb'；
stroke（）；
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
context.lineWidth=4；
context.strokeStyle='#8aff92'；
stroke（）
.pkmn
{
位置：相对位置；
显示：内联块；
保证金：5px；
宽度：116px；
高度：116px；
}
.pkmn.sprite
{
填充物：5px；
位置：相对位置；
顶部：5px；
左：5px；
z指数：-1；
}
.pkmn.lvl
{
字体系列：“Courier New Regular”，无衬线；
字体大小：30px；
z指数：100；
位置：绝对位置；
边际上限：0；
}
.pkmn.crown
{
位置：绝对位置；
左：44px；
底部：9px；
}
.pkmn.项目
{
位置：绝对位置；
左：10px；
底部：12px；
}
.pkmn.star
{
位置：绝对位置；
右：30px；
顶部：14px；
}
.心脏{
位置：绝对位置；
右：10px；
顶部：40px；
}
.pkmn.exp{
位置：绝对位置；
显示：内联块；
}

95
95
将代码包装在for循环中，该循环遍历所有具有id边框的元素。下面是修改后的代码


for（var i=0；i

.pkmn
{
位置：相对位置；
显示：内联块；
保证金：5px；
宽度：116px；
高度：116px；
}
.pkmn.sprite
{
填充物：5px；
位置：相对位置；
顶部：5px；
左：5px；
z指数：-1；
}
.pkmn.lvl
{
字体系列：“Courier New Regular”，无衬线；
字体大小：30px；
z指数：100；
位置：绝对位置；
边际上限：0；
}
.pkmn.crown
{
位置：绝对位置；
左：44px；
底部：9px；
}
.pkmn.项目
{
位置：绝对位置；
左：10px；
底部：12px；
}
.pkmn.star
{
位置：绝对位置；
右：30px；
顶部：14px；
}
.心脏{
位置：绝对位置；
右：10px；
顶部：40px；
}
.pkmn.exp{
位置：绝对位置；
显示：内联块；
}

95
95
警告怪癖模式。
不要使用重复的ID，这将导致您的页面速度减慢，并且由于浏览器切换到的事实，许多行为会发生变化

我之所以添加这个答案，是因为给出的答案有另一个非常糟糕的代码

for (var i = 0; i < document.querySelectorAll('.border').length; i++) {  
      var canvas = document.querySelectorAll('#border')[i];


95
95
我同意，但最好不要多次使用同一个ID。因此，你必须使用类。我知道这与我的JS有关！非常感谢你！抱歉，您不应该使用相同的ID。ID必须是唯一的。如果不是唯一的，浏览器将处于“怪癖”模式，降低整个页面的速度并更改许多行为。更好的解决方案是使用
queryselectoral（“.exp”）
通过类名查找画布元素，并完全删除重复的ID。你说得对。我知道这会影响性能。但在他的问题中，他并没有让同学们读一点关于阶级和身份的区别——这应该是显而易见的！谢谢