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>
转载于:https://www.cnblogs.com/zhangzhengyang/p/11256033.html
