<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5带工具台绘画板代码</title>
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="h_box">
<canvas id="canvas" width="1200" height="600"></canvas>
<div class="h_console">
<div class="h_tool">工具台</div>
<ul class="h_tool1">
<li id="line" class="bg">
<span class="iconfont" title="绘制直线"></span>
</li>
<li id="rect" class="bg">
<span class="iconfont" title="绘制矩形"></span>
</li>
<li id="dytriangle" class="bg">
<span class="iconfont" title="绘制等腰三角形"></span>
</li>
<li id="zjtriangle" class="bg">
<span class="iconfont" title="绘制直角三角形"></span>
</li>
<li id="tablet" class="bg bgtb">
<span class="iconfont" title="铅笔"></span>
</li>
<li id="polygon" class="bg bgp">
<span class="iconfont" title="绘制多边形"></span>
<div class="polygon1">
<input type="number" min="3" max="30" value="3" id="range">
<div class="trag"></div>
</div>
</li>
<li class="bg" id="circle">
<span class="iconfont" title="绘制圆形"></span>
</li>
<li class="bg" id="ellipse">
<span class="iconfont" title="绘制椭圆"></span>
</li>
<li class="bg" id="eraser">
<span class="iconfont" title="橡皮擦"></span>
</li>
</ul>
<ul class="h_tool1 h_tool2">
<li class="bg" id="way">
<span class="iconfont" title="转换填充样式"></span>
</li>
<li class="bg bgp">
<span class="iconfont" title="修改填充色"></span>
<div class="polygon1 poly1">
<input type="color" id="fillCo">
<div class="trag"></div>
</div>
</li>
<li class="bg bgp">
<span class="iconfont" title="线条加粗"></span>
<div class="polygon2">
<input type="range" min="1" max="30" value="1" id="linew">
<div class="trag trag1"></div>
<p id="numW">0</p>
</div>
</li>
<li class="bg" id="revo">
<span class="iconfont" title="撤销"></span>
</li>
<li class="bg" id="refresh">
<span class="iconfont" title="刷新画板"></span>
</li>
<li class="bg" id="save">
<span class="iconfont" title="保存"></span>
</li>
</ul>
</div>
<div class="h_tittle">
<div class="h_tittle1">
<img src="img/palette_03.png" alt="" />
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>