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

HTML5キャンバスサークルテキスト


キャンバスの円の内側にテキストを作成するには、-

を使用します
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キャンバス要素を表示するためのコードスニペットです。 <a href = "javascript:print_voucher()">PRINT CANVAS</a> function print_canvas() {    $("#canvas_voucher").printElement(); } ここでcanvas_voucherはcanvas要素のIDです。これを機能させるには、canvasを.png画像のURLに変換し、新しいブラウザウィンドウで開く必要があります。印刷ダイアログがトリ

  2. HTML5キャンバス変換

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