1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #canvas {
8 border: 1px solid #ccc;
9 display: block;
10 margin: 0 auto;
11 }
12 </style>
13 </head>
14 <body>
15 <canvas id="canvas" width="800" height="600"></canvas>
16 <script>
17 // 1. 获取画布
18 let canvas = document.querySelector('#canvas');
19 // 2. 获取上下文 绘制的工具箱
20 let ctx = canvas.getContext('2d');
21
22 // 3. 文字
23 let str = '喜欢IT, 就来撩课！';
24
25 // 4. 画布的尺寸
26 let w = ctx.canvas.width;
27 let h = ctx.canvas.height;
28
29 // 5. 画十字架在画布的最中间
30 ctx.beginPath();
31 ctx.moveTo(0, h / 2 - 0.5);
32 ctx.lineTo(w, h / 2 - 0.5);
33 ctx.moveTo(w / 2 - 0.5, 0);
34 ctx.lineTo(w / 2 - 0.5, h);
35 ctx.strokeStyle = '#ccc';
36 ctx.stroke();
37
38 // 6. 绘制文本
39 ctx.beginPath();
40 let x0 = w/2;
41 let y0 = h/2;
42 ctx.strokeStyle = 'purple';
43 /*
44 text: string,
45 x: number,
46 y: number,
47 maxWidth?: number
48 */
49 // 设置字体
50 ctx.font = '60px Microsoft YaHei';
51 // 设置水平居中 left right
52 ctx.textAlign = 'center'; // "start" | "end" | "left" | "right" | "center"
53 // 设置垂直居中
54 ctx.textBaseline = 'middle'; // "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom"
55 // ctx.strokeText(str, x0, y0);
56 ctx.fillStyle = 'blue';
57 ctx.fillText(str, x0, y0);
58 </script>
59 </body>
60 </html>
