canvas provides two methods for rendering text
1, fillText (text, x, y [, maxWidth]) filled with the specified text in the specified (x, y) position, the maximum width is plotted optional
2, strokeText (text, x, y [, maxWidth]) established maximum width (x, y) position of the text borders drawn, drawing is optional
3, font = value we used to draw the current text style, using the same string and css font attribute syntax, the default font is 10px sans-serif
4, textAlign = value text alignment options, optional values: start, end, left, right, center, the default value is stare
5, textBaseline = value baseline alignment options, selectable values: Top, Hanging, Middle, alphabetic, ideographic, bottom. The default value is alphabetic。.
6, direction = value text direction, possible values, tr, rtl, inherit. The default value is inherit. I did not try out
Specifically demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制文本</title>
<style>
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="tutorial" width="500px" height="300px"></canvas>
</body>
<script>
function draw(){
var canvas= document.getElementById("tutorial")
if(!canvas.getContext) return;
var ctx=canvas.getContext("2d");
ctx.font = "100px sans-serif";
ctx.textBaseline="top";
ctx.fillText("大大小小",10,100);</ HTML></ Script>Draw ()}
ctx.strokeText ( "more or less", 50,200);