キャンバスはテキストを描畫します
Context オブジェクトの fillText(string, x, y) メソッドは、テキストの內(nèi)容、開始點(diǎn)の x 座標(biāo)、y 座標(biāo)の 3 つのパラメーターを使用します。使用する前に、fontを使用してフォント、サイズ、スタイルを設(shè)定する必要があります(記述方法はCSSのfont屬性に似ています)。これと同様に、空虛な単語を追加するために使用される、ストロークテキスト メソッドがあります。もう 1 つの注意: fillText メソッドはテキストの改行をサポートしていません。つまり、すべてのテキストが 1 行に表示されます。したがって、複數(shù)行のテキストを生成する場合は、fillText メソッドを複數(shù)回呼び出すことしかできません。
コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>huatu</title>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當(dāng)前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
// 設(shè)置字體
context.font = "Bold 50px Arial";
// 設(shè)置對齊方式
context.textAlign = "left";
// 設(shè)置填充顏色
context.fillStyle = "#005600";
// 設(shè)置字體內(nèi)容，以及在畫布上的位置
context.fillText("PHP中文網(wǎng)!", 10, 50);
// 繪制空心字
context.strokeText("www.miracleart.cn!", 10, 100);
</script>
</body>
</html>
