标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> fillText strokeText</title> </head> <body> <canvas id="wapper" width="500" height="500"></canvas> <script> var wapper = document.getElementById(‘wapper‘), _2d = wapper.getContext(‘2d‘);/*2d的绘制对象*/ _2d.font=‘30px Arial‘; _2d.fillText(‘dtdxrk‘,50,50);/*fillText(text,x,y,max width)*/ _2d.strokeText(‘dtdxrk‘,50,100);/*strokeText(text,x,y,max width)*/ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体 大小 粗细</title> </head> <body> <canvas id="wapper" width="500" height="500"></canvas> <script> var wapper = document.getElementById(‘wapper‘), _2d = wapper.getContext(‘2d‘);/*2d的绘制对象*/ _2d.font=‘30px Arial‘; _2d.fillText(‘dtdxrk‘,10,30);/*fillText(text,x,y,max width)*/ _2d.font=‘italic 40px simsun‘; _2d.fillText(‘dtdxrk‘,10,100);/*fillText(text,x,y,max width)*/ _2d.font=‘bold 22px simsun‘; _2d.fillText(‘dtdxrk‘,10,150);/*fillText(text,x,y,max width)*/ </script> </body> </html>
感觉没啥好说的
http://www.w3school.com.cn/tags/canvas_textalign.asp
_2d.textAlign="center|end|left|right|start";
http://www.w3school.com.cn/tags/canvas_textbaseline.asp
_2d.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
标签：
原文地址：http://www.cnblogs.com/dtdxrk/p/4441705.html
