HTML5でstrokeText()を使用してテキストを描画するにはどうすればよいですか?
HTML5でキャンバスにテキストを描画するには、strokeText()メソッドを使用します。これがstrokeText()メソッドの構文です。指定された位置で指定されたテキストをストロークします。これは、指定されたx座標とy座標で示されます。デフォルトの色は黒です。
strokeText(text, x, y [, maxWidth ] )
| | |
---|---|---|
S。いいえ | パラメータ | 説明 |
1 | テキスト | 書き込むテキスト |
2 | X | ペイントが開始されるx座標 |
3 | Y | ペイントが開始されるx座標 |
4 | maxWidth | 最大許容幅(ピクセル単位) |
例
次のコードを実行して、HTML5でstrokeText()を使用してテキストを描画することができます-
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas strokeText()</title> </head> <body> <canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctxt = c.getContext("2d"); ctxt.fillStyle = '#00F'; ctxt.font = "20px Georgia"; ctxt.strokeText("Tutorialspoint", 10, 50); ctxt.fillStyle = '#Cff765'; ctxt.font = "30px Verdana"; ctxt.strokeText("Simply Easy Learning!", 10, 90); </script> </body> </html>
-
HTML5でarc()を使用して円を描く方法は?
arc()メソッドは、canvas要素を使用してHTML5で円を作成するために使用されます。 arc()メソッドを使用する円の場合、開始角度を0に、終了角度を2*Math.PIに使用します。 これがarc()メソッドのパラメータ値です- S。いいえ パラメータ 説明 1 x x座標 2 y y座標 3 r 円の半径 4 startingAngle ラジアン単位の開始角度 5 endingAngle ラジアン単位の終了角度 6 反時計回り(True / False)
-
HTML5でlineTo()を使用して線を引く方法は?
HTMLで線を描画するには、canvas要素を使用します。キャンバスでは、lineTo()メソッドを使用して線を描画します。 lineTo()メソッドには、線を配置するxおよびyパラメーター値が含まれています。 例 次のコードを実行して、HTML5でlineTo()を使用して線を引くことができます- <!DOCTYPE html> <html> <head> <title>HTML Canvas</title> </head>