```javascript
<html lang="en"><head>
<meta charset="UTF-8">
<title>画板</title>
<style>
body,html{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0 no-repeat; background-size: cover; overflow: hidden; font-family: "Microsoft yahei"; background-color: #fff;-webkit-user-select: none;
-moz-user-select:none;
-o-user-select:none;
-ms-user-select:none; }
li{ list-style-type: none; }
ul{ padding-left: 10px }
h1{
position:fixed;
left:15px;
top:5px;
width:250px;
height:60px;
color: #ff5e83;
font-size:26px;
line-height:60px;
text-align:center;
background-color:;
}
canvas{ position: fixed; left: 280px; top: 5px; display: block; cursor: pointer; background-color: #FFFFFF; border: 1px solid #CCCCCC; }
.container{
width:250px;
height:60px;
position:fixed;
left:15px;
top:70px;
}
.container h2{
width:100%;
height:60px;
font-size:22px;
text-align:center;
color: #ff377e;
font-weight:normal;
line-height:60px;
border-bottom:1px solid #000;
}
.container h3{
width:100%;
height:30px;
font-size:18px;
text-align:center;
color: #41b1ff;
font-weight:normal;
line-height:30px;
}
.row{ width: 100%; height: auto; background-color: rgba(192,192,192,0.50); overflow: hidden; }
.type{
width:100%;
height:auto;
margin:20px 0;
10px;
border-bottom:1px solid #fff;
}
.type:after{
content:"";
display:block;
clear:both;
}
.type li{
float:left;
width:90px;
height:45px;
margin:0 auto;
background-color:#0078ff;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
margin-bottom:15px;
border-radius:5px;
cursor:pointer;
transition:all 0.7s;
}
.type li:hover{
background-color:#fff;
color:#0078ff;
box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
}
.type .typeactive{
background-color:#fff;
color:#0078ff;
box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
}
.type li:nth-child(odd){
margin-left:25px;
}
.type li:nth-child(even){
margin-left:20px;
}
.style{
width:100%;
height:40px;
}
.style li{
float:left;
width:90px;
height:45px;
background-color:#FFBC00;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
border-radius:5px;
cursor:pointer;
transition:all 0.7s;
}
.style li:hover{
color: #ffa800;
background-color:#fff;
box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
}
.style .styleactive{
color: #ffa800;
background-color:#fff;
box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
}
.style li:nth-child(1){
margin-left:25px;
}
.style li:nth-child(2){
margin-left:20px;
}
.poly{
position:relative;
}
.bian{
position:absolute;
left:100px;top:0;
width:90px;
height:auto;
border-radius:5px;
background-color:#EC494E;
overflow:hidden;
overflow:hidden;
transform:scale(1.2);
display:none;
}
.bian span{
display:block;
float:left;
width:40px;
height:45px;
font-size:16px;
color:#fff;
text-align:center;
line-height:40px;
color:#fff;
transition:all 0.7s;
}
.bian input{
float:left;
width:45px;
height:35px;
margin-top:5px;
border:1px solid #fff;
box-sizing:border-box;
text-align:center;
line-height:40px;
font-size:18px;
color:#fff;
background:#EC494E;
border-radius:3px;
box-shadow:0 0 0 4px #fff inset;
transition:all 0.7s;
}
.cut,.create,.back{
float:left;
width:90px;
height:45px;
margin-left:25px;
margin-bottom:15px;
background-color: #5bd219;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
border-radius:5px;
cursor:pointer;
}
.copy,.clear,.save{
float:left;
width:90px;
height:45px;
margin-left:20px;
margin-bottom:15px;
background-color: #5bd219;
color:#fff;
font-size:18px;
line-height:45px;
text-align:center;
border-radius:5px;
cursor:pointer;
}
.shezhi{
transition:all 0.7s;
}
.shezhistyle{
background:#fff;
color:#5bd219;
}
.create{
position:relative;
}
.xinjian{
position:absolute;
left:0;top:0;
width:200px;
height:165px;
border-radius:5px;
background-color:#EC494E;
box-shadow:0 0 15px rgba(236, 73, 78, 0.76);
cursor:default;
display:none;
}
.xinjian:hover{
color:#fff;
}
.xinjian_before{
position:absolute;
right:0;
top:0;
width:20px;
height:20px;
color:#fff;
line-height:16px;
text-indent:-1px;
font-size:30px;
border:1px solid #fff;
transform:rotate(45deg);
border-radius:50%;
cursor:pointer;
}
.xinjian h6{
width:100%;
height:50px;
color:#fff;
line-height:50px;
text-align:center;
font-size:20px;
font-weight:normal;
}
#ding{
width:60px;
height:30px;
font-size:14px;
border-radius:3px;
color:#fff;
background-color:#0078ff;
border:0;
outline:none;
cursor:pointer;
box-shadow:0 0 10px rgba(0, 120, 255, 0.5);
}
.xinjian_width,.xinjian_height{
float:left;
width:85px;
height:40px;
margin-left:10px;
border-radius:5px;
margin-bottom:20px;
background-color:#FFBC00;
}
.xinjian_width:hover,.xinjian_height:hover{
background-color:#fff;
color:#000;
}
.xinjian_width span,.xinjian_height span{
float:left;
width:30px;
height:100%;
font-size:16px;
text-align:center;
line-height:40px;
}
.xinjian_width input,.xinjian_height input{
float:left;
margin-top:5px;
width:50px;
height:30px;
text-align:center;
line-height:30px;
font-size:14px;
border:1px solid #FFBC00;
box-sizing:border-box;
}
.box{
float:left;
width:90px;
height:auto;
background-color:#EC494E;
overflow:hidden;
border-radius:5px;
transition:all 0.7s;
}
.box{
margin-left:25px;
}
.linewidth{
margin-left:20px;
}
.box:hover{
background-color:#fff;
}
.box span{
display:block;
float:left;
width:40px;
height:45px;
font-size:16px;
color:#fff;
text-align:center;
line-height:40px;
color:#fff;
transition:all 0.3s;
}
.box input{
float:left;
width:45px;
height:35px;
margin-top:5px;
border:1px solid #fff;
box-sizing:border-box;
text-align:center;
line-height:40px;
font-size:18px;
color:#fff;
background:#EC494E;
border-radius:3px;
box-shadow:0 0 0 4px #fff inset;
transition:all 0.3s;
}
.box2 span{
width:55px;
}
.box2 input{
width:140px;
}
.space{
float:left;
width:100%;
height:0;
border-bottom:1px solid #fff;
margin:20px 0;
}
</style>
</head>
<body style="">
<h1>画板</h1>
<div class="container">
<div class="row">
<ul name="" class="type">
<li class="line typeactive" data="line">直 线</li>
<li class="rect" data="rect">矩 形</li>
<li class="circle" data="circle">圆 圈</li>
<li class="pen" data="pen">铅 笔</li>
<li class="poly" data="poly">多 边 形
<div class="bian"><span>边数</span><input type="number" name="number" min="3" value="3" max="15"></div></li>
<li class="eraser" data="eraser">橡 皮</li>
</ul>
<ul class="style">
<li class="stroke styleactive">描 边</li>
<li class="fill" style="display: none;">填 &nbs
155-2731-8020