Canvas繪制文本

Context上下文對(duì)象的fillText(string, x, y)方法是用來(lái)繪制文本，它的三個(gè)參數(shù)分別為文本內(nèi)容、起點(diǎn)的x坐標(biāo)、y坐標(biāo)。使用之前，需用font設(shè)置字體、大小、樣式（寫(xiě)法類似與CSS的font屬性）。與此類似的還有strokeText方法，用來(lái)添加空心字。另外注意一點(diǎn)：fillText方法不支持文本斷行，即所有文本出現(xiàn)在一行內(nèi)。所以，如果要生成多行文本，只有調(diào)用多次fillText方法。

代碼如下：

<!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">
    //通過(guò)id獲得當(dāng)前的Canvas對(duì)象
 var canvasDom = document.getElementById("demoCanvas");
    //通過(guò)Canvas Dom對(duì)象獲取Context的對(duì)象
 var context = canvasDom.getContext("2d");
    context.moveTo(200,200);
    // 設(shè)置字體
 context.font = "Bold 50px Arial";
    // 設(shè)置對(duì)齊方式
 context.textAlign = "left";
    // 設(shè)置填充顏色
 context.fillStyle = "#005600";
    // 設(shè)置字體內(nèi)容，以及在畫(huà)布上的位置
 context.fillText("PHP中文網(wǎng)!", 10, 50);
    // 繪制空心字
 context.strokeText("m.miracleart.cn!", 10, 100);
</script>
</body>
</html>

繼續(xù)學(xué)習(xí)

新建文件

<!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"> //通過(guò)id獲得當(dāng)前的Canvas對(duì)象 var canvasDom = document.getElementById("demoCanvas"); //通過(guò)Canvas Dom對(duì)象獲取Context的對(duì)象 var context = canvasDom.getContext("2d"); context.moveTo(200,200); // 設(shè)置字體 context.font = "Bold 50px Arial"; // 設(shè)置對(duì)齊方式 context.textAlign = "left"; // 設(shè)置填充顏色 context.fillStyle = "#005600"; // 設(shè)置字體內(nèi)容，以及在畫(huà)布上的位置 context.fillText("PHP中文網(wǎng)!", 10, 50); // 繪制空心字 context.strokeText("m.miracleart.cn!", 10, 100); </script> </body> </html>

提交重置代碼

自動(dòng)運(yùn)行

章節(jié)

筆記

提問(wèn)

課件

反饋

捐贈(zèng)