1、思路。在这个案例当中，我们要展示所有的文本基线使用技巧，从而让大家对于文本基线这样的一个工具有了一个全面的了解。在代码的使用方面，会综合用到边框样式定义、文本基线定义、文本基线与文字的赋值流程、直线绘制等等。
2、外边框元素样式声明。<canvas id="文本基线" width="400" height="300" style="border:2px solid #B8860B;">
3、文本基线作为变量的声明。var c=document.getElementById("文本基线");var ctx=c.getContext("2d");
4、文本基线的绘制流程，文本内容的样式定义。ctx.strokeStyle="#B8860B";ctx.moveTo(2,100);ctx.lineTo(395,100);ctx.stroke();ctx.font="10px Arial"
5、五组不同文字位置的一一声明，这也表现了文本基线所能达成的位置形式。ctx.textBaseline="top";ctx.fillText("顶端",2,100);ctx.textBaseline="bottom";ctx.fillText("底端",45,100);ctx.textBaseline="middle";ctx.fillText("中间",110,100);ctx.textBaseline="alphabetic";ctx.fillText("默认",180,100);ctx.textBaseline="hanging";ctx.fillText("悬挂",280,100);
6、if语句的应用，在程序中我们可以设定一个IF语句，如果程序满足条件则事件发生，如果程度不满足就不发生。下面这个程序就说明了坐标在路径范围内才绘制，如果不在就不绘制的过程。if (ctx.isPointInPath(20,130)) { ctx.stroke(); };
