canvas绘制文字
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas绘制文字</title> <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> body{ margin: 0; padding: 0; } </style> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="800" height="300"></canvas> </body> </html>
function draw(id){ var canvas = document.getElementById(id);//获得canvas对象 var context = canvas.getContext('2d');//获得上下文,并设置成2d context.fillStyle = "green";//设置画布大小的矩形颜色 context.fillRect(0,0,800,300);//绘制画布大小的矩形 context.fillStyle = "white";//设置文字的填充色 context.strokeStyle = "white";//设置文字边框的颜色 context.font = "bold 40px '华文行楷','微软雅黑'";//设置字体粗细,大小,样式【可多选】。 //文字垂直对齐方式,默认值是alphabetic // Bottom Alphabetic //—————————————————Middle—————————————————————————————— //Top Hanging //context.textBaseline = 'alphabetic'; //属性值可以是top(顶部对齐)、hanging(悬挂)、middle(中间对齐)、bottom(底部对齐)、alphabetic是默认值。 context.textBaseline = 'hanging'; //设置文字水平对齐方式,默认值是start // | // | // |start // end| // |left // center // right| // | // | //context.textAlign = 'start'; //属性值可以设置为:start、end、left、right、center context.fillText("欢迎光临华帅博客",30,70); context.strokeText("HTML5+CSS3实战",200,130); context.fillText("新手入门,大神见谅。",380,190); context.fillText('123456789987654321123456789987654321123456789987654321123456789987654321123456789987654321',0,260,800) }
绘制字体时可以使用的fillText方法或者StrokeText方法。
fillText方法用填充的方式来绘制字符串
context.fillText(text,x,y,[maxwidth]);
strokeText方法用轮廓的方式来绘制字符串
context.strokeText(text,x,y,[width]);
第一个参数text表示要绘制的文字,第二个参数x表示要绘制的起点横坐标,第三个参数y表示要绘制的文字的起点纵坐标,第四个参数maxwidth为可选参数,表示显示文字时最大的宽度,可以防止文字溢出。
略懂,略懂....