สร้างข้อความภายในวงกลมบน HTML5 Canvas

บทนำ

การวาดข้อความภายในวงกลมบน Canvas ต้องใช้ context.arc() สำหรับวาดวงกลม และ context.fillText() สำหรับวาดข้อความ โดยต้องคำนวณตำแหน่งให้อยู่กึ่งกลางวงกลม

โค้ดตัวอย่าง

<div id="demo">
  <canvas id="canvas1" width="500" height="400" style="border:1px solid #ccc;"></canvas>
</div>

<script>
$("#demo").on("click", "#canvas1", function(event) {
  var canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    var w = 50; // ความกว้างเส้นผ่านศูนย์กลาง
    var x = event.pageX - $(this).offset().left; // ปรับให้อยู่ใน canvas
    var y = event.pageY - $(this).offset().top;
    
    // วาดวงกลม
    context.beginPath();
    context.fillStyle = "blue";
    context.arc(x, y, w/2, 0, 2 * Math.PI, false);
    context.fill();
    
    // วาดข้อความตรงกลางวงกลม
    context.font = '16px Arial';
    context.fillStyle = 'white';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText('Click', x, y);
  }
});
</script>

คำอธิบายฟังก์ชันสำคัญ

การคำนวณตำแหน่งข้อความให้ตรงกลาง

// วิธีที่ถูกต้อง: ใช้ textAlign + textBaseline
context.textAlign = 'center';       // กึ่งกลางแนวนอน
context.textBaseline = 'middle';    // กึ่งกลางแนวตั้ง
context.fillText('Text', x, y);     // x,y = จุดศูนย์กลางวงกลม

ฟังก์ชันช่วยสำหรับใช้ซ้ำ

function drawCircleWithText(ctx, x, y, radius, text, options) {
  options = options || {};
  var bgColor = options.bgColor || '#3498db';
  var textColor = options.textColor || '#ffffff';
  var font = options.font || '16px Arial';
  
  // วาดวงกลม
  ctx.beginPath();
  ctx.fillStyle = bgColor;
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fill();
  
  // วาดข้อความ
  ctx.font = font;
  ctx.fillStyle = textColor;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, x, y);
}

// ใช้งาน
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
drawCircleWithText(ctx, 100, 100, 40, 'Hello', {bgColor: 'red'});

การปรับปรุงจากโค้ดต้นฉบับ

• เพิ่ม textBaseline = 'middle' สำหรับจัดกึ่งกลางแนวตั้ง
• แก้ไขการคำนวณ x,y ให้ถูกต้องกับ canvas offset
• เพิ่ม width/height ให้ canvas
• สร้างฟังก์ชัน reusable