回転ルーレットを作る JavaScript + canvas

2019-01-17約 12 分

概要

JavaScriptとcanvasで回転するルーレットを作りました。

Runボタンを押すと回転開始。stopボタンを押すと減速を始め、数秒後に停止します。ライブラリとかは使っていません。

デモ

まずはデモをみてください。

外部ウィンドウで開く

デモ画像

簡単な解説

ソースコード上のポイントを簡単に説明します。サンプルソースが汚いのはご容赦ください。

扇型の描画

デモにもあるようにこの円盤は複数の扇型図形を並べて描画しています。この扇型はCanvas API の CanvasRenderingContext2D.arc()で描画されています。

context.beginPath();
context.moveTo(150, 150);
context.fillStyle = '#f3f3f3';
context.arc(150, 150, 100, 0 * Math.PI / 180, 45 * Math.PI / 180, true);
context.fill();

ここでmoveToメソッドで始点を与えることで扇型を描画することができます。

サンプルソースはデモの座標と同じように(150, 150)を中心とし、半径が100で、０度から45度の扇型を描画します。

扇型の描画に関する解説はこちらにも掲載しています。

https://tech-blog.s-yoshiki.com/2019/01/1037/

減速

イベント開始と同時に setInterval関数を用いて、0.01秒ごとに円の角度をずらしながら繰り返し描画しています。

ストップボタンが押されたら回転速度が徐々に下がるようになっています。減速のロジック自体はy = a / x のような簡単な反比例の式を使って実装しています。

ソース

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

var center = {
  x: 150,
  y: 150,
};

var radius = 100;

var data = [{
  name: 'label1',
  color: '#FFCEBE',
  weight: 1,
}, {
  name: 'label2',
  color: '#CEFFBE',
  weight: 1,
}, {
  name: 'label3',
  color: '#CEBEFF',
  weight: 1,
}, {
  name: 'label4',
  color: '#FDED9E',
  weight: 1,
}];

var sum_weight = 0;
var unit_weight = 0;
var stopFlag = false;
var startFlag = false;

//
// メイン処理
//
data.forEach(e => {
  sum_weight += e.weight;
});
unit_weight = 360 / sum_weight;

init();

showLabel();

drawRoullet(0);

function drawRoullet(offset) {
  var uw_count = offset;

  data.forEach(e => {
    drawPie(
      center.x,
      center.y,
      uw_count,
      uw_count + unit_weight,
      radius,
      e.color,
    );
    uw_count += unit_weight;
  });
}

function runRoullet() {
  var count = 1; // 終了までのカウント
  var lastCell = '';
  var deg_counter = 0; // 角度のカウント
  var acceleration = 1;

  var timer = setInterval(function() {
    deg_counter += acceleration;

    if (stopFlag) {
      count++;
    }

    if (count < 1000) {
      acceleration = 1000 / (count);
      drawRoullet(deg_counter);
    } else {
      count = 0;
      clearInterval(timer);
      endEvent();
    }
  }, 10);

  var endEvent = function() {
    count++;
    var id = setTimeout(endEvent, 115);
    if (count > 9) {
      clearTimeout(id);
      startFlag = false;
      stopFlag = false;
      var current_deg = Math.ceil(deg_counter % 360);
      var sum = 0;
      for (var i = 0; i < data.length; i++) {
        if (
          unit_weight * sum < current_deg
          && current_deg < unit_weight * (sum + data[i].weight)
        ) {
          document.getElementById('debug').innerHTML = data[i].name;
          break;
        }
        sum += data[i].weight;
      }
    }
  };
}

document.getElementById('run').addEventListener('click', function() {
  // スタート連打を無効化
  if (startFlag === false) {
    runRoullet();
    startFlag = true;
  } else {
    startFlag = false;
  }
});

document.getElementById('stop').addEventListener('click', function() {
  if (startFlag) {
    stopFlag = true;
  }
});

function init() {
  canvas.width = 300;
  canvas.height = 300;

  var dst = context.createImageData(canvas.width, canvas.height);
  for (var i = 0; i < dst.data.length; i++) {
    dst.data[i] = 255;
  }
  context.putImageData(dst, 0, 0);
}

function drawPie(cx, cy, start_deg, end_deg, radius, color) {
  var _start_deg = (360 - start_deg) * Math.PI / 180;
  var _end_deg = (360 - end_deg) * Math.PI / 180;

  context.beginPath();
  context.moveTo(cx, cy);
  context.fillStyle = color; // 塗りつぶしの色は赤
  context.arc(cx, cy, radius, _start_deg, _end_deg, true);
  context.fill();

  showArrow();
}

function showLabel() {
  var label_el = document.getElementById('labels');

  var text = '<table>';

  for (var i = 0; i < data.length; i++) {
    text += `
        <tr>
        <td style="width:20px;background-color:${data[i].color};"></td>
        <td>${data[i].name}</td>
        </tr>`;
  }

  text += '</table>';

  label_el.innerHTML = text;
}

function showArrow() {
  context.beginPath();
  context.moveTo(center.x, center.y - radius);
  context.lineTo(center.x + 10, center.y - radius - 10);
  context.lineTo(center.x - 10, center.y - radius - 10);
  context.closePath();
  context.stroke();
  context.fillStyle = 'rgba(40,40,40)';
  context.fill();
}

`requestAnimationFrame`で回す

元の実装のような setInterval は描画タイミングと画面更新が一致せず、タブが非表示でも意図しない進行をすることがあります。アニメーションには requestAnimationFrame を使い、経過時間から角度を計算します。

let startedAt = 0;
const duration = 5000;
const startAngle = 0;
const rotations = 6;

const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);

function animate(timestamp) {
  if (startedAt === 0) startedAt = timestamp;

  const elapsed = timestamp - startedAt;
  const progress = Math.min(elapsed / duration, 1);
  const eased = easeOutCubic(progress);
  const angle = startAngle + eased * rotations * Math.PI * 2;

  drawRoulette(angle);

  if (progress < 1) {
    requestAnimationFrame(animate);
  } else {
    showResult(angle);
  }
}

requestAnimationFrame(animate);

当選項目の求め方

描画に使った開始角、回転方向、矢印位置を同じ基準へ揃えます。

const TAU = Math.PI * 2;
const normalized = ((angle % TAU) + TAU) % TAU;
const segment = TAU / data.length;
const pointerAngle = -Math.PI / 2;
const index = Math.floor(
  (((pointerAngle - normalized) % TAU) + TAU) % TAU / segment,
);

console.log(data[index]);