Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Tạo text bên trong hình tròn trên HTML5 Canvas

Để tạo text bên trong hình tròn trên canvas, dùng:

context.beginPath();

Canvas như sau:

$("'#demo'").on("'click', "'#canvas1'", function(event) {
  var canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    var w = 25;
    var x = event.pageX;
    var y = Math.floor(event.pageY-$(this).offset().top);
    context.beginPath();
    context.fillStyle = "blue";
    context.arc(x, y, w/2, 0, 2 * Math.PI, false);
    context.fill();
    context = canvas.getContext("2d");
    context.font = '9pt';
    context.fillStyle = 'white';
    context.textAlign = 'center';
    context.fillText('amit', x, y+4);
  }
});

HTML

<div id="demo">
  <canvas id="canvas1"></canvas>
</div>