javascript - HTML5 中的多个动态 Canvas

Question

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

我已经在 J​​Sfiddle 中尝试使用 HTML、CSS 和 JS，并成功地用一张图片创建了我想要的效果，但是当我复制 html 时，它并没有制作第二张 Canvas (或者可能正在制作另一个，和第一个一样的地方？)

https://jsfiddle.net/impo/87e8yqnt/23/

上面是我的 jsfiddle，我该如何更改它以便每张图片都带有它的 Canvas ？

	  var canvas = document.getElementById('border');
      var context = canvas.getContext('2d');
      var x = 58;
      var y = 58;
      var radius = 55;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = '#ebebeb';
      context.stroke();
      
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      
      context.lineWidth = 4;
      context.strokeStyle = '#8aff92';
      context.stroke();

.pkmn 
{
	position: relative;
  display: inline-block;
  margin: 5px;
  width: 116px;
  height: 116px;
}

.pkmn .sprite
{
	padding: 5px;
	position: relative;
    top: 5px;
    left: 5px;
    z-index: -1;
}

.pkmn .lvl
{
	font-family: 'Courier New Regular', sans-serif;
	font-size: 30px;
	z-index: 100;
	position: absolute;
    margin-top:0;
}

.pkmn .crown
{
  position: absolute;
  left: 44px;
  bottom: 9px;
}

.pkmn .item
{
  position: absolute;
  left: 10px;
  bottom: 12px;
}

.pkmn .star
{
  position: absolute;
  right: 30px;
  top: 14px;
}

.pkmn .heart {
  position: absolute;
  right: 10px;
  top: 40px;
}

.pkmn .exp {
  position: absolute;
  display: inline-block;
}

<div class="pkmn">
    <canvas id="border" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

<div class="pkmn">
    <canvas id="border" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

Answer 1

警告怪癖模式。

不要使用重复的 ID，这会导致您的页面变慢，并且由于浏览器切换到 quirks mode 而导致许多行为发生变化。 .

我出于这个原因添加了这个答案，因为给定的答案还有另一个非常糟糕的代码。

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

此代码对查询找到的每个元素执行 2 个文档查询。这会明显降低低端机器上只有几十个匹配元素的页面速度。

const canvases = document.querySelectorAll('.exp')
for (var i = 0; i < canvases.length; i++) {	 
      var canvas = canvases[i];
      var context = canvas.getContext('2d');
      var x = 58;
      var y = 58;
      var radius = 55;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 3;

      // line color
      context.strokeStyle = '#ebebeb';
      context.stroke();
      
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      
      context.lineWidth = 4;
      context.strokeStyle = '#8aff92';
      context.stroke();
}

.pkmn 
{
	position: relative;
  display: inline-block;
  margin: 5px;
  width: 116px;
  height: 116px;
}

.pkmn .sprite
{
	padding: 5px;
	position: relative;
    top: 5px;
    left: 5px;
    z-index: -1;
}

.pkmn .lvl
{
	font-family: 'Courier New Regular', sans-serif;
	font-size: 30px;
	z-index: 100;
	position: absolute;
    margin-top:0;
}

.pkmn .crown
{
  position: absolute;
  left: 44px;
  bottom: 9px;
}

.pkmn .item
{
  position: absolute;
  left: 10px;
  bottom: 12px;
}

.pkmn .star
{
  position: absolute;
  right: 30px;
  top: 14px;
}

.pkmn .heart {
  position: absolute;
  right: 10px;
  top: 40px;
}

.pkmn .exp {
  position: absolute;
  display: inline-block;
}

<div class="pkmn">
    <canvas id="border1" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>

<div class="pkmn">
    <canvas id="border2" class="exp" width="115" height="115"></canvas>

    <div class="lvl">95</div>
    
    <img alt="test" src="http://cdn.bulbagarden.net/upload/7/76/Spr_5b_143_s.png" class="sprite">
    <img alt="item" src="http://cdn.bulbagarden.net/upload/0/0f/Bag_Leftovers_Sprite.png" class="item">
    <img alt="crown" src="http://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" class="crown">
    <img alt="star" src="http://cdn.bulbagarden.net/upload/2/27/ShinyVIStar.png" class="star">
    <img alt="heart" src="http://i1055.photobucket.com/albums/s519/impojr/heart_zpsdaihll9m.png" class="heart">
</div>