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>
-
HTML5キャンバス要素を印刷します
以下は、HTML5キャンバス要素を表示するためのコードスニペットです。 <a href = "javascript:print_voucher()">PRINT CANVAS</a> function print_canvas() { $("#canvas_voucher").printElement(); } ここでcanvas_voucherはcanvas要素のIDです。これを機能させるには、canvasを.png画像のURLに変換し、新しいブラウザウィンドウで開く必要があります。印刷ダイアログがトリ
-
HTML5キャンバス変換
HTML5キャンバスは、変換行列を直接変更できるメソッドを提供します。変換行列は、最初はID変換である必要があります。その後、変換方法を使用して調整できます。 例 キャンバス変換の例を見てみましょう: <!DOCTYPE HTML> <html> <head> <script> function drawShape(){ //