1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>19-Canvas绘制文字</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="800" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 // 3.绘制参考线 26 let canvasWidth = oCtx.canvas.width; 27 let canvasHeight = oCtx.canvas.height; 28 oCtx.moveTo(0, canvasHeight/2); 29 oCtx.lineTo(canvasWidth, canvasHeight/2); 30 oCtx.stroke(); 31 oCtx.moveTo(canvasWidth/2, 0); 32 oCtx.lineTo(canvasWidth/2, canvasHeight); 33 oCtx.stroke(); 34 // 4.绘制文字 35 let str = "小白兔真可爱两只耳朵竖起来"; 36 // 通过font属性可以设置文字的大小和样式 37 oCtx.font = "50px 微软雅黑"; 38 // 通过textBaseline属性可以设置文字垂直方向的对齐方式 39 // 注意点: 在对齐的时候是以绘制文字的y作为参考点进行对齐的 40 oCtx.textBaseline = "middle"; 41 // 通过textAlign属性可以设置文字水平方向的对齐方式 42 // 注意点: 在对齐的时候是以绘制文字的x作为参考点进行对齐的 43 oCtx.textAlign = "center"; 44 /* 45 注意点: 46 在绘制文字的时候, 是以文字的左下角作为参考点进行绘制 47 * */ 48 //不填充文字 49 // oCtx.strokeText(str, canvasWidth/2, canvasHeight/2); 50 //填充文字 51 // oCtx.fillText(str, canvasWidth/2, canvasHeight/2); 52 </script> 53 </body> 54 </html>