円グラフ作成 ケーキを切る少年たちのゲーム

円グラフ作成 ケーキを切る少年たちのゲーム | ひまあそび-ミニゲーム hi0a.com

view source

JavaScript

document.title = '円グラフ作成 ケーキを切る少年たちのゲーム';

let { canvas, ctx, cx, cy, w, h, min, demo } = readyCanvas();



const radius = min/2 - min/90;

let angles = [0]; // クリックされた角度の記録（開始は0）
const colors = ['#f88','#8f8','#88f','#ff8','#8ff','#f8f','#f44','#4f4','#44f','#ff4','#4ff','#f4f'];

function drawSegments() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  let sortedAngles = [...angles].sort((a, b) => a - b);

  for (let i = 0; i < sortedAngles.length; i++) {
    const rawStart = sortedAngles[i];
    const rawEnd = sortedAngles[i + 1] ?? (2 * Math.PI); // 最後は2πまで描く
    const isLast = (i === sortedAngles.length - 1 && rawEnd === 2 * Math.PI);
    
    const start = rawStart - Math.PI / 2;
    const end = rawEnd - Math.PI / 2;
    const mid = (rawStart + rawEnd) / 2 - Math.PI / 2;

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, radius, start, end);
    ctx.closePath();

    // 色分け：最後の余りは #888、それ以外は配列から
    ctx.fillStyle = (i === sortedAngles.length - 1) ? "#888" : colors[i % colors.length];
    ctx.fill();

    // 線の描画（最後の終了点に線を描かない）
/*
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + radius * Math.cos(start), cy + radius * Math.sin(start));
    ctx.stroke();
*/

    // パーセント表示
    if(angles.length < 15){
      const percent = ((rawEnd - rawStart) / (2 * Math.PI) * 100).toFixed(1);
      const labelX = cx + (radius * 3/ 4) * Math.cos(mid);
      const labelY = cy + (radius * 3/ 4) * Math.sin(mid);
      ctx.fillStyle = "black";
      ctx.font = "16px sans-serif";
      ctx.fillText(`${percent}%`, labelX - 15, labelY);
    }
  }
}


canvas.addEventListener("click", function(e) {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left - cx;
  const y = e.clientY - rect.top - cy;

  let angle = Math.atan2(y, x);
  let adjustedAngle = (angle + Math.PI / 2 + 2 * Math.PI) % (2 * Math.PI); // 12時を基準に補正

  if (!angles.some(a => Math.abs(a - adjustedAngle) < 0.01)) {
    angles.push(adjustedAngle);
  }

  drawSegments();
});

canvas.addEventListener("dblclick", function () {
  angles = [0]; // 初期状態にリセット
  drawSegments();
});

// 初期描画
drawSegments();

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/game/canvas-circle-grath/

  

  
ABOUT

  

    
hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
仕様変更、API廃止等、実験途中で動かないページもあります。