你的位置:首页 > 网页设计

[网页设计]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为可选参数,表示显示文字时最大的宽度,可以防止文字溢出。