canvas_4

 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>
猜你喜欢
