HTML5中的多个动态画布

Question

对于我正在制作的网站，我将需要多个画布，围绕单个图像进行响铃。

我在JSfiddle中尝试过HTML，CSS和JS，并设法用单个图像创建我想要的效果，但是当我复制html时，它没有制作第二个画布（或者它正在制作另一个，和第一个一样的地方？）

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

上面是我的jsfiddle，我如何改变它以使每个图像都用它的画布？

	  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>

Answer 2

将代码换入for循环，该循环遍历所有具有id边框的元素。以下是修改后的代码。

＆＃13;

＆＃13;

for (var i = 0; i < document.querySelectorAll('#border').length; i++) {	 
      var canvas = document.querySelectorAll('#border')[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();
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用document.querySelectorAll（）获取具有id边框的所有元素。