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">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
// 设置字体
context.font = "Bold 50px Arial";
// 设置对齐方式
context.textAlign = "left";
// 设置填充颜色
context.fillStyle = "#005600";
// 设置字体内容，以及在画布上的位置
context.fillText("PHP中文网!", 10, 50);
// 绘制空心字
context.strokeText("www.php.cn!", 10, 100);
</script>
</body>
</html>
Next Section