Canvas draws text
The fillText(string, x, y) method of the Context object is used to draw text. Its three parameters are the text content, the x coordinate and the y coordinate of the starting point. Before use, you need to use font to set the font, size, and style (the writing method is similar to the font attribute of CSS). Similar to this, there is the strokeText method, which is used to add hollow words. Another note: the fillText method does not support text line breaks, that is, all text appears in one line. Therefore, if you want to generate multiple lines of text, you can only call the fillText method multiple times.
The code is as follows:
<!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)容，以及在畫布上的位置
context.fillText("PHP中文網(wǎng)!", 10, 50);
// 繪制空心字
context.strokeText("miracleart.cn!", 10, 100);
</script>
</body>
</html>
