怎样自己编写一个html手写模拟器

html-css014

怎样自己编写一个html手写模拟器,第1张

自己编写html手写模拟器方法如下：

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，但是我都是在代码视图里写的，主要是有自动提示，不然还真的可以用记事本写了。