Canvas создание нескольких счетчиков

224

16 декабря 2019, 08:10

Подскажите, как создать несколько холстов со счетчиками которые работали по логике одной функции. Приведу пример

window.onload = function() { 
 
  var currency = '\u20B4 '; /// uah 
  var canvas = document.getElementsByClassName('canvas-counter'); 
  var canvasesLenght = canvas.length; 
 
  for (var i = 0; i < canvasesLenght; i++) { 
    var ctx = canvas[i].getContext('2d'); 
  } 
 
  canvas.width = 275; 
  canvas.height = 125; 
 
  ctx.font = "700 28px Roboto, sans-serif"; 
  ctx.fillStyle = "#000"; 
  ctx.textAlign = 'center'; 
  ctx.textBaseline = 'middle'; 
 
  ctx.shadowOffsetX = 0; 
  ctx.shadowOffsetY = 5; 
  ctx.shadowBlur = 8; 
 
  var counter = 0; 
 
  /// Random number 
  function randomInteger(min, max) { 
    var rand = min + Math.random() * (max - min); 
    rand = Math.round(rand); 
    return rand; 
  } 
 
  function JackPot(number, currentShadow) { 
    this.number = number; 
    this.currentShadow = currentShadow; 
  } 
 
 
  var myJackPotRed = new JackPot(121, "rgba(122, 7, 5, .85)"); /// red 
  var myJackPotDiamond = new JackPot(2233, "rgba(122, 7, 5, .85)"); /// diamond 
  var myJackPotGold = new JackPot(33324, "rgba(122, 7, 5, .85)"); /// gold 
  var myJackPotSilver = new JackPot(423333, "rgba(122, 7, 5, .85)"); /// silver 
 
 
  function createCounter(myJackPot) { 
    ctx.shadowColor = myJackPot.currentShadow; 
    var currentNumber = myJackPot.number; 
 
    redraw(); 
 
    function redraw() { 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
      counter = randomInteger(2, 10); 
 
      currentNumber = currentNumber + counter; 
      ctx.fillText(currency + currentNumber, 125, 65); 
      return currentNumber 
    } 
 
    setInterval(redraw, 1000); 
  } 
 
  createCounter(myJackPotRed); 
  createCounter(myJackPotDiamond); 
  createCounter(myJackPotGold); 
  createCounter(myJackPotSilver); 
 
}

.canvas-counter { 
  width: 275px; 
  height: 125px; 
  text-align: center; 
  border: 1px solid red; 
  font-family: Roboto, sans-serif; 
  font-size: 28px; 
  font-weight: 700; 
  margin-right: 3.4%; 
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<div class="jackpots-winns"> 
  <canvas class="canvas-counter canvas-counter-red"></canvas> 
  <canvas class="canvas-counter canvas-counter-diamond"></canvas> 
  <canvas class="canvas-counter canvas-counter-gold"></canvas> 
  <canvas class="canvas-counter canvas-counter-silver"></canvas> 
</div>

Я не понимаю, как инициализировать все 4 счетчика, а не последний, и что б каждый начинал отсчет со своего числа ?

Answer 1

Исправил Ваш код, оставив его максимально похожим на оригинал, но его все равно надо рефакторить =)

Ваша ошибка была в том, что таймер и общался только с последней канвой из списка

самое простое решение - передать канву в виде аргумента

 function createCounter(myJackPot, canvas)

window.onload = function() { 
 
  var currency = '\u20B4 '; /// uah 
  var canvas = document.getElementsByClassName('canvas-counter'); 
   
  function randomInteger(min, max) { 
    return Math.round(min + Math.random() * (max - min)); 
  } 
 
  function JackPot(number, currentShadow) { 
    this.number = number; 
    this.currentShadow = currentShadow; 
  } 
 
  var myJackPotRed = new JackPot(121, "rgba(122, 7, 5, .85)"); /// red 
  var myJackPotDiamond = new JackPot(2233, "rgba(122, 7, 5, .85)"); /// diamond 
  var myJackPotGold = new JackPot(33324, "rgba(122, 7, 5, .85)"); /// gold 
  var myJackPotSilver = new JackPot(423333, "rgba(122, 7, 5, .85)"); /// silver 
 
  function createCounter(myJackPot, canvas) { 
    let ctx = canvas.getContext('2d'); 
    canvas.width = 275; 
    canvas.height = 125; 
     
    ctx.font = "700 28px Roboto, sans-serif"; 
    ctx.fillStyle = "#000"; 
    ctx.textAlign = 'center'; 
    ctx.textBaseline = 'middle'; 
 
    ctx.shadowOffsetX = 0; 
    ctx.shadowOffsetY = 5; 
    ctx.shadowBlur = 8; 
     
    var counter = 0; 
    ctx.shadowColor = myJackPot.currentShadow; 
    var currentNumber = myJackPot.number; 
 
    canvas._redraw = redraw; 
    redraw(); 
    function redraw() { 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      counter = randomInteger(2, 10); 
      currentNumber = currentNumber + counter; 
      ctx.fillText(currency + currentNumber, 125, 65); 
      return currentNumber 
    } 
  } 
 
  createCounter(myJackPotRed,  canvas[0]); 
  createCounter(myJackPotDiamond, canvas[1]); 
  createCounter(myJackPotGold,  canvas[2]); 
  createCounter(myJackPotSilver,  canvas[3]); 
   
  setInterval(() => [...canvas].forEach(c => c._redraw()), 1000); 
 
}

.canvas-counter { 
  width: 275px; 
  height: 125px; 
  text-align: center; 
  border: 1px solid red; 
  font-family: Roboto, sans-serif; 
  font-size: 28px; 
  font-weight: 700; 
  margin-right: 3.4%; 
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<div class="jackpots-winns"> 
  <canvas class="canvas-counter canvas-counter-red"></canvas> 
  <canvas class="canvas-counter canvas-counter-diamond"></canvas> 
  <canvas class="canvas-counter canvas-counter-gold"></canvas> 
  <canvas class="canvas-counter canvas-counter-silver"></canvas> 
</div>

Answer 2

Похожие примеры можно найти тут

Создадим функцию makeCounter, которая будет являться конструктором счетчика. Если передать в неё параметр - счетчик будет стартовать с переданного значения. По умолчанию (если вызвать makeCounter без параметра) счетчик будет стартовать с единицы.

function makeCounter(initVal) {
  function counter() {
    return counter.currentCount++;
  };
  counter.currentCount = initVal || 1;
  return counter;
}

Пример использования:

const counter1 = makeCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3
const counter2 = makeCounter();
console.log(counter2()); // 1
console.log(counter2()); // 2