কম্পিউটার টিউটোরিয়াল

HTML5 Canvas-এ বৃত্তের ভিতরে টেক্সট তৈরি

ক্যানভাসে বৃত্তের ভিতরে টেক্সট তৈরি করতে context.beginPath() ব্যবহার করুন।

ক্যানভাস কোড:

$("#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>
  1. HTML5 Canvas-এ সার্কেল কলিশন ডিটেকশন

  2. HTML5 Canvas-এ ইমেজের অংশ আঁকা

  3. HTML5 Canvas Transformation

  4. HTML5 ক্যানভাসে প্যাটার্ন তৈরি করা