<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/canvas.css">
<script src="js/jQuery.js"></script>
<script src="js/canvasdraw.js"></script>
<script src="js/canvas.js"></script>
</head>
<body>
<ul class="menu">
<li class="parent hasson"><div>文件</div>
<ul class="son file">
<li>新建</li>
<li>返回</li>
<li>保存</li>
</ul>
</li>
<li class="parent hasson"><div>工具</div>
<ul class="son">
<li data-role="line">线</li>
<li data-role="rect">矩形</li>
<li data-role="pen">铅笔</li>
<li data-role="circle">园</li>
<li data-role="star">五角星</li>
</ul>
</li>
<li class="parent hasson"><div>填充类型</div>
<ul class="son">
<li data-rolo="stroke">边框</li>
<li data-rolo="fill">填充</li>
</ul>
</li>
<li class="parent hasson"><div>边框的颜色</div>
<ul class="son">
<input type="color">
</ul>
</li>
<li class="parent hasson"><div>填充的颜色</div>
<ul class="son">
<input type="color">
</ul>
</li>
<li class="parent hasson"><div>线宽度</div>
<ul class="son">
<!--<li>大</li>-->
<!--<li>中</li>-->
<!--<li>小</li>-->
<li><input type="text" style="width:90px"></li>
</ul>
</li>
<li class="parent xpc">
<div>橡皮擦</div>
<ul class="son">
<li cdata-role="18">小</li>
<li data-role="36">中</li>
<li data-role="54">大</li>
</ul>
</li>
<li class="parent hasson"><div class="select">选择</div>
<!--<ul class="son">-->
<!--<li >选择</li>-->
<!--<li>移动</li>-->
<!--</ul>-->
</li>
<li class="parent sq" ></li>
</ul>
<div class="container">
<div class="box">
<div class="xp"></div>
<div class="selectarea"></div>
<div class="copy"></div>
<canvas width="800px" height="600px">
</canvas>
</div>
</div>
</body>
</html>
