1、首先用canvas绘制一个米字格，然后获取到鼠标按下去后的那个点在canvas里面的X和Y坐标的值；
2、以及鼠标移动后的那个点在canvas里面的X和Y坐标的值，然后调用stroke方法直接绘制即可；
3、代码里面的lineCap=round和lineJoin=round可以让线看起来更圆润，否则会出现断层。
这个效果可以有很多种方法来实现的，这里为你演示最简单的一种，假设你的总长是600像素，两个标题栏为并排显示的效果，CSS样式如下：
<style type="text/css">
#box {width:600pxmargin:20px auto}
#box .left,#box .righ {width:280pxfont-weight:boldline-height:25pxborder-bottom:solid 2px #9e193f}
#box .left {float:left}
#box .righ {float:right}
#box .left_l {float:leftdisplay:inline-blockwidth:85pxfont-size:13pxbackground:#9e193fcolor:#fffpadding-left:10px}
#box .righ_r {float:rightfont-size:10pxcolor:#9e193f}
</style>
DIV编写格式如下：
<div id="box">
<div class="left">
<span class="left_l">学校简介</span>
<span class="righ_r">详情</span>
</div>
<div class="righ">
<span class="left_l">动态信息</span>
<span class="righ_r">更多</span>
</div>
</div>
直接复制以上代码，产生的结果如下：
如果《学校简介》与《动态信息》是图片，可在相应的DIV中使用：
<img src="图片路径/图片名称">即可。
我个人是建议手写+工具。【工具用来随时检查错误和提示】手写比较规范而且也比较好控制一些东西，这些东西一时间也说不清楚，等你遇到问题就知道了。
反正现在我写html代码是用dw，但是我都是在代码视图里写的，主要是有自动提示，不然还真的可以用记事本写了。
