HTML5中的多个动态画布

Question

For a website I'm making I'm going to need multiple canvases that make a ring around individual images.

I've experimented with HTML, CSS, and JS in JSfiddle and have managed to create the desired effect I want with a single image, but when I duplicate the html it doesn't make a second canvas (or maybe it's making another, just the same place as the first?)

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

Above is my jsfiddle, how would I change it so that every image is with its 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

Warning Quirks Mode.

Don`t use duplicated ID's this will cause your page to slow down and many behaviors to change due to the fact the browser switches to quirks mode .

I add this answer for that reason and because the given answer has another very bad bit of code.

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

This code does 2 document queries for every item found by the query. This would noticeably slow the page with just a few dozen matching elements on low end machines.

 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

Wrap your code in for loop which goes through all the elements having id border. Below is modified code.

 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(); } 

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

Use document.querySelectorAll() for getting all the elements having the id border.