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没有用，因为学了html还有别的才能说明你是一个web前端开发。html只是web前端里面最基础的东西，本身基本可以说是无难度，但是光学他是写不了网站的。
所以你要知道你学习web前端的前提是熟练掌握：html，css，javascript （最基础）。
而当你学习完之后还需要学习：Jquery，css3，html5，amazeui或bootstrap。（一般）
以后想学习混合app开发做到前后端分离时还需要学习：angularJS或React，ionic或native，node.js，以及混合app打包。（高级）
而且你以后写pc端网页或者移动端手机页面的快慢除了上面这些还有你的技术经验年限的。
