- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 文字 </title>
- </head>
- <body>
- <canvas id="canvas">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- context.strokeStyle="red";
- context.strokeRect(0,0,300,150);
- context.fillStyle="red";
- context.fillText("美好生活",0,40);
- context.strokeText("大好时光",0,100);
- </script>
- </body>
- </html>
在 canvas 画布中对文字进行绘制, 同时可以指定绘制文字的字体, 大小, 对齐方式, 还可以进行文字的纹理填充. 绘制文字可以使用 fillText 方法或者 strokeText 方法.
fillText 方法用填充方式绘制字符串, 该方法的定义:
- void fillText(text,x,y,[maxWidth]);
- void strokeText(text,x,y,[maxWidth]);
第一个参数 text 表示要绘制的文字, 第二个参数 x 表示绘制文字的起点横坐标, 第三个参数 y 表示绘制文字的起点纵坐标, 第四个参数 maxWidth 为可选参数, 表示显示文字时的最大宽度, 可以防止文字溢出.
在使用 canvas API 进行文字的绘制之前, 可以先对该对象的相关文字绘制的属性进行设置, font 属性 设置文字字体, textAlign 属性设置文字水平对齐方式属性为 start,end,left,right,center.textBaseline 设置文字垂直对齐方式.
来源: http://www.qdfuns.com/note/49226/a0584750b2a606f82c12cc4a93a8b575.html