canvas/canvas.html at master · lewiscutey/canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<head>
    <html lang="en">
    <meta charset="UTF-8">
    <title>canvas-网页版PS</title>
    <link rel="stylesheet" href="css/canvas.css">
    <script src="js/jquery.js"></script>
    <script src="js/canvas.js"></script>
    <script src="js/draw.js"></script>
</head>
<body>

 <div class="box">
      <ul class="menu">
            <li class="menu-list">
                <a href="javascript:;">文件</a>
                <ul class="aside-menu-list">
                    <li>新建</li>
                    <li>打开<input type="file" class="open"></li>
                    <li>撤销</li>
                    <li>保存</li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="javascript:;">画图</a>
                <ul class="aside-menu-list">
                    <li data-role="line">画线</li>
                    <li data-role="rect">矩形</li>
                    <li data-role="arc">圆</li>
                    <li data-role="polygon">多边形</li>
                    <li data-role="pentagrams">多角形</li>
                    <li data-role="pen">铅笔工具</li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="javascript:;">画图方式</a>
                <ul class="aside-menu-list">
                    <li data-role="stroke">描边</li>
                    <li data-role="fill">填充</li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="javascript:;">颜色</a>
                <ul class="aside-menu-list">
                    <li>边框:</li>
                    <li><input type="color" data-role="strokeStyle"></li>
                    <li>背景:</li>
                    <li><input type="color" data-role="fillStyle"></li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="javascript:;">线条宽度</a>
                <ul class="aside-menu-list">
                    <li data-role="1">细</li>
                    <li data-role="3">中</li>
                    <li data-role="5">粗</li>
                    <li data-role="null"><input type="number" placeholder="请选择粗细" size="5"></li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="javascript:;">滤镜</a>
                <ul class="aside-menu-list">
                    <li data-role="rp">反相</li>
                    <li data-role="mosaic">马赛克</li>
                    <li data-role="blur">高斯模糊</li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="javascript:;">橡皮擦</a>
                <ul class="aside-menu-list">
                    <li><input type="number" placeholder="请选择大小"></li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="javascript:;">选择</a>
            </li>
      </ul>
      <div class="main">
          <div class="canvas-box">
              <canvas></canvas>
              <div class="copy"></div>
              <div class="xp"></div>
              <div class="selectarea"></div>
          </div>
          <aside>
              <ul class="file">
                  <li><i class="iconfont icon-xinjian"></i></li>
                  <li><i class="iconfont icon-dakai"><input type="file" class="open"></i></li>
                  <li><i class="iconfont icon-iocnchexiao"></i></li>
                  <li><i class="iconfont icon-baocun"></i></li>
              </ul>
              <ul class="hua">
                  <li><i class="iconfont icon-zhixian"></i></li>
                  <li><i class="iconfont icon-juxing"></i></li>
                  <li><i class="iconfont icon-yuan"></i></li>
                  <li><i class="iconfont icon-duobianxing"></i></li>
                  <li><i class="iconfont icon-wujiaoxing"></i></li>
                  <li><i class="iconfont icon-qianbi"></i></li>
              </ul>
              <ul class="hua-style">
                  <li><i class="iconfont icon-stroke"></i></li>
                  <li><i class="iconfont icon-beijing"></i></li>
              </ul>
              <ul class="xpxz">
                  <li><i class="iconfont icon-xuanze"></i></li>
                  <li><i class="iconfont icon-xiangpica"></i></li>
              </ul>
              <ul class="lvjing">
                  <li><i class="iconfont icon-masaike-copy"></i></li>
                  <li><i class="iconfont icon-iconmobantuijianfanxiang"></i></li>
                  <li><i class="iconfont icon-bk-magnifier"></i></li>
                  <li><i class="iconfont icon-za"></i></li>
              </ul>
              <ul class="border-color">
                  <input type="color" data-role="strokeStyle">
              </ul>
              <ul class="back-color">
                  <input type="color" data-role="fillStyle">
              </ul>
              <ul class="line-width">
                  <i class="iconfont-small"></i>
                  <i class="iconfont-mid"></i>
                  <i class="iconfont-big"></i>
              </ul>
          </aside>
      </div>
 </div>
 <img src="" alt="打开失败" hidden>

</body>
</html>