Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTML5Canvasの円の中にテキストを作成する


キャンバスの円の内側にテキストを作成するには、次を使用します:

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キャンバス変換

    HTML5キャンバスは、変換行列を直接変更できるメソッドを提供します。変換行列は、最初はID変換である必要があります。その後、変換方法を使用して調整できます。 例 キャンバス変換の例を見てみましょう: <!DOCTYPE HTML> <html>    <head>       <script>          function drawShape(){             //

  2. HTML5Canvasでパターンを作成する

    HTML5 Canvasでパターンを作成するには、次のメソッドを使用します。createPattern(image、repeatment)-このメソッドは、画像を使用してパターンを作成します。 2番目の引数は、repeat、repeat-x、repeat-y、およびno-repeatのいずれかの値を持つ文字列にすることができます。空の文字列またはnullが指定されている場合、繰り返しが想定されます。 例 次のコードを実行して、パターンの作成方法を学ぶことができます- <!DOCTYPE HTML> <html>    <head> &nb