标签：har phi img doc info pat number canvas htm
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>
标签：har phi img doc info pat number canvas htm
原文地址：https://www.cnblogs.com/zhangzhengyang/p/11256033.html
