儿童画板

今天站在技术角度，给大家分享一款个人开发的在线画板工具-速写板，支持在线画画、画图、思维导图等，可以用来涂鸦、画草图、快速表大想法等。
关键词
在线画板、在线画图、在线画画、在线手写板、在线写字板、速写板、图片制作、SVG制作、图片处理
背景
速写板开发的初衷是，当身边没有纸和笔时，或许一款在线画画板，在线写字板工具可以帮助我们，快速表达内心的想法。随着版本迭代，速写板已经具备一些简单的设计能力。
技术解析
技术实现：html5、bootstrap4、jquery、sass、canvas、fabric、minicolor等一些优秀的开源插件、集成速抠图在线抠图插件
Html代码：

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <!--meta-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <meta name="google-site-verification" content="sWQIaElZVA4xDPoRQZPl6uOJhwrTEr2pfXcHovtJAMA"/>
    <meta name="baidu-site-verification" content="dj0FWqQTAE"/>
    <meta name="360-site-verification" content="fc2c1b4004816df56b0f448becfd5e67"/>
    <meta name="sogou_site_verification" content="979yOJcRGw"/>
    <meta name="shenma-site-verification" content="045032629fec33d5225432180ee0f6a1_1581678794"/>
    <meta name="msvalidate.01" content="7C3A8A99AF6AA9F926A0F1A766913B4C"/>
    <title>画画_画图_思维导图_在线手写板_速写板</title>
    <meta name="description"
          content="速写板 suxieban.com 提供免费在线画图软件、画画软件、图片制作、SVG制作等，支持画画、画图、画思维导图、流程图、草图，图片生成、素材导入、SVG导出等。用户可通过画笔、喷漆、插入文字、图形库、素材库及功能菜单快捷高效的画画、画图、制作并分享精美的图片等。"/>
    <meta name="keywords" content="画画,画图,思维导图,绘图,画图软件,在线画图,图片制作,在线手写板,速写板,SVG制作"/>
    <meta content="all" name="robots"/>
    <meta content="suxieban.com" name="copyright"/>
    <meta content="suxieban.com" name="author"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="no-cache, must-revalidate" http-equiv="Cache-Control"/>
    <meta content="-1" http-equiv="expires"/>
    <!--css-->
    <!--css-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.0-1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/jquery-minicolors/2.3.4/jquery.minicolors.png">
    <link rel="stylesheet" href="https://cdn.staticfile.org/jquery-minicolors/2.3.4/jquery.minicolors.min.css">
    <!--my.css-->
    <link rel="stylesheet" href="css/sketch-pad.min.css?v=0.4">
    <!--js-->
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-minicolors/2.3.4/jquery.minicolors.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/fabric.js/4.0.0-beta.5/fabric.min.js"></script>
    <!--my.js-->
    <script src="js/my/sketchPad.min.js?v=1.1"></script>
    <script src="js/my/common.js?v=0.1"></script>
    <script data-ad-client="ca-pub-8551674815797939" async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body class="bg-light p-0 m-0 w-100 h-100">
<div hidden>
    <img alt="画图_思维导图_在线手写板_速写板" src="file/title.jpg" width="250" height="150">
    <h3>
        速写板是一款免费的在线画图、画画工具网站及在线手写板工具软件,用户通过速写板提供的画布、画笔、文字插入、图形库、素材库等功能，可快捷高效的画画、绘图、画思维导图、流程图、草图等，同时支持图片制作及生成、SVG制作及生成。</h3>
</div>
<div class="container-fluid">
    <div id="topRowDiv" class="row bg-dark bg-gradient-dark">
        <div class="col-lg-2">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient-dark m-0 p-0">
                <a class="navbar-brand font-weight-bold pr-1 mr-0" href="https://www.suxieban.com">
                    <i class="fa fa-tablet-alt"></i> <span>速写板</span>
                </a>
                <div class="btn-group btn-group-sm">
                    <button id="btnOptionsSet" type="button"
                            class="btn btn-dark file-btn">
                        <i class="fa fa-cog"></i>
                    </button>
                    <div class="btn-group btn-group-sm">
                        <button type="button"
                                class="btn btn-dark dropdown-toggle" data-toggle="dropdown"
                                title="导入文件">
                            <i class="fa fa-folder-open"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-sm-left">
                            <a id="btnImport" class="dropdown-item" title="导入速写板生成的编辑文件" href="#">
                                <i class="fa fa-database "></i> 导入速写板SXB可编辑文件
                            </a>
                            <input id="importFileBtn" class="file" accept=".sxb" type="file" hidden/>
                            <a id="btnImportImg" class="dropdown-item" title="导入图片素材" href="#">
                                <i class="fa fa-image"></i> 导入图片素材
                            </a>
                            <input id="fileImportImg" class="file" type="file" hidden/>
                            <a id="btnImportSVG" class="dropdown-item" title="导入SVG素材" href="#">
                                <i class="fa fa-passport"></i> 导入SVG素材
                            </a>
                            <input id="fileImportSVG" class="file" accept=".svg" type="file" hidden/>
                        </div>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-dark dropdown-toggle"
                                data-toggle="dropdown"
                                title="生成图片（CTRL + S）">
                            <i class="fa fa-cloud-download-alt"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-sm-left">
                            <a id="fileDownLoadBtn" class="dropdown-item my-sm-hide" href="#">
                                <i class="fa fa-database "></i> 生成速写板SXB可编辑文件
                            </a>
                            <a id="imgDownLoadBtn" class="dropdown-item" href="#">
                                <i class="fa fa-image "></i> 生成图片（CTRL + S）
                            </a>
                            <a id="imgSaveCut" class="dropdown-item" href="#">
                                <i class="fa fa-crop "></i> 生成图片并剪裁
                            </a>
                            <a id="svgDownLoadBtn" class="dropdown-item my-sm-hide" href="#">
                                <i class="fa fa-passport "></i> 生成SVG
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="col-lg-10 pr-sm-0 pt-1 pb-1">
            <div id="toolsBar" class="btn-group btn-group-sm">
                <button id="btnPen" type="button" class="btn btn-dark"
                        title="铅笔">
                    <i class="fa fa-pen" title="铅笔"></i>
                </button>
                <button id="btnSpray" type="button" class="btn btn-dark"
                        title="喷漆">
                    <i class="fa fa-spray-can" title="喷漆"></i>
                </button>
                <button id="btnWord" type="button" class="btn btn-dark"
                        title="插入文字">
                    <i class="fa fa-font" title="插入文字"></i>
                </button>
                <button id="btnLine" type="button" class="btn btn-dark"
                        title="直线">
                    <i class="fa fa-minus" title="直线"></i>
                </button>
                <button id="btnDotted" type="button" class="btn btn-dark"
                        title="虚线">
                    <i class="fa fa-ellipsis-h" title="虚线"></i>
                </button>
                <button id="btnArrow" type="button" class="btn btn-dark"
                        title="箭头">
                    <i class="fa fa-long-arrow-alt-right" title="箭头"></i>
                </button>
                <button id="btnAngle" type="button" class="btn btn-dark"
                        title="三角形">
                    <i class="fa fa-play" title="三角形"></i>
                </button>
                <button id="btnRect" type="button" class="btn btn-dark"
                        title="矩形">
                    <i class="fa fa-square" title="矩形"></i>
                </button>
                <button id="btnCircle" type="button" class="btn btn-dark"
                        title="圆形">
                    <i class="fa fa-circle" title="圆形"></i>
                </button>
                <button id="btnShape" type="button" class="btn btn-dark"
                        title="图形">
                    <i class="fa fa-shapes" title="图形"></i>
                </button>
            </div>
            <div class="btn-group btn-group-sm ml-sm-4">
                <button id="btnZoom" type="button" class="btn btn-dark" title="画布放大（鼠标管轮向上&uarr;）">
                    <i class="fa fa-search-plus" title="放大画布（鼠标管轮向上&uarr;）"></i>
                </button>
                <button id="btnShrink" type="button" class="btn btn-dark" title="画布缩小（鼠标滚轮向下 &darr;）">
                    <i class="fa fa-search-minus" title="缩小画布（鼠标滚轮向下 &darr;）"></i>
                </button>
                <button id="btnCenter" type="button" class="btn btn-dark" title="画布居中">
                    <i class="fa fa-dot-circle" title="居中画布"></i>
                </button>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-arrows-alt" title="画布移动"></i>
                    </button>
                    <div class="dropdown-menu p-3">
                        <a id="btnLeft" class="dropdown-item" href="#">
                            <i class="fa fa-arrow-left"
                               title="向左移动画布（按键 A 或 &larr;）"></i> 左移（A或&larr;）
                        </a>
                        <a id="btnRight" class="dropdown-item" href="#"> <i class="fa fa-arrow-right"
                                                                            title="向右移动画布（按键 D 或 &rarr;）"></i> 右移（D或&rarr;）</a>
                        <a id="btnTop" class="dropdown-item" href="#"> <i class="fa fa-arrow-up"
                                                                          title="向上移动画布（按键 W 或 &uarr;）">
                            上移（W或&uarr;）</i></a>

                        <a id="btnBottom" class="dropdown-item" href="#"> <i class="fa fa-arrow-down"
                                                                             title="向下移动画布（按键 S 或 &darr;）"></i>
                            下移（S或&darr;）</a>
                        <input id="btnMoveLeftRight" type="range" min="0" max="100" value="30" title="左右移动"
                               class="custom-range bg-white dropdown-item">
                        <input id="btnMoveTopBottom" type="range" min="0" max="100" value="30" title="上下移动"
                               class="custom-range bg-white dropdown-item">
                    </div>
                </div>
            </div>
            <div id="toolsBarBack" class="btn-group btn-group-sm ml-sm-4">
                <button id="btnUndo" type="button" class="btn btn-dark" title="撤销">
                    <i class="fa fa-undo" title="撤销（CTRL + S）"></i>
                </button>
                <button id="btnRedo" type="button" class="btn btn-dark" title="恢复">
                    <i class="fa fa-redo" title="恢复（CTRL + Y）"></i>
                </button>
                <button id="btnResize" type="button" class="btn btn-dark" title="选中调整">
                    <i class="fa fa-hand-paper" title="选中调整"></i>
                </button>
                <button id="btnEraser" type="button" class="btn btn-dark" title="橡皮">
                    <i class="fa fa-eraser" title="橡皮"></i>
                </button>
                <button id="btnClean" type="button" class="btn btn-dark" title="删除">
                    <i class="fa fa-trash-alt" title="删除"></i>
                </button>
                <button id="btnCut" type="button" class="btn btn-dark" title="抠图-速抠图">
                    <i class="fa fa-cut" title="抠图-速抠图"></i>
                </button>
            </div>
        </div>
    </div>
    <div id="centerRowDiv" class="row bg-dark">
        <div id="panelLeft" class="col-2  bg-dark  h-auto  w-100 h-100 pt-0 pr-0 overflow-hidden small">
            <div class="tab-content p-2  my-bg-dark rounded border-light h-100  w-100 shadow text-white"
                 id="nav-tabContent">
                <div class="tab-pane rounded h-100 w-100" id="panelFunPage" role="tabpanel">
                    <div class="form-group">
                        <label for="pageSizeDiv">画板尺寸</label>
                        <div id="pageSizeDiv">
                            <div class=" row">
                                <div class="col-5 pr-0">
                                    <input id="iptPageSizeWidth" type="range" min="1" value="500"
                                           class="custom-range">
                                </div>
                                <div class="col-2 p-0">
                                </div>
                                <div class="col-5 pl-0">
                                    <input id="iptPageSizeHeight" type="range" min="1" value="500"
                                           class="custom-range">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col pr-0">
                                    <div class="input-group input-group-sm">
                                        <input id="iptPageSizeWidthVal" type="text" class="form-control"
                                               value="5"
                                               oninput="value=value.replace(/[^\d]/g,'')"
                                               placeholder="宽">
                                        <div class="input-group-append">
                                            <span class="input-group-text">px</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-1 text-center p-1">
                                    <i id="pageSizeLock" class="fa fa-lock pointer" title="等比，锁定宽高比例"></i>
                                </div>
                                <div class="col pl-0">
                                    <div class="input-group input-group-sm">
                                        <input id="iptPageSizeHeightVal" type="text" class="form-control"
                                               value="5"
                                               oninput="value=value.replace(/[^\d]/g,'')"
                                               placeholder="高">
                                        <div class="input-group-append">
                                            <span class="input-group-text btn-group-vertical">px</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pageBackDiv">画板背景颜色</label>
                        <div id="pageBackDiv">
                            <div class="form-row" id="BackgroundColorDiv" name="cropBackgroundColorDiv">
                                <div id="inputBgColorSelectDiv" class="select-border">
                                    <div id="inputBgColorSelect">
                                    </div>
                                </div>
                                <div color="#ffffff" class="select-border my-select" style="background-color:#ffffff"
                                     title="白色">
                                </div>
                                <div color="#38b6ff" class="select-border" style="background-color:#38b6ff" title="淡蓝色">
                                </div>
                                <div color="#8c52ff" class="select-border" style="background-color:#8c52ff" title="紫色">
                                </div>
                                <div color="#ff66c4" class="select-border" style="background-color:#ff66c4" title="粉色">
                                </div>
                                <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                </div>
                                <div color="#c9e265" class="select-border" style="background-color:#c9e265" title="黄绿色">
                                </div>
                                <div color="#ffde59" class="select-border" style="background-color:#ffde59" title="黄色">
                                </div>
                                <div color="#ffbd59" class="select-border" style="background-color:#ffbd59" title="桃红色">
                                </div>
                                <div color="#ff914d" class="select-border" style="background-color:#ff914d" title="橙色">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pageBackImgDiv">画板背景图片</label>
                        <div id="pageBackImgDiv">
                            <div class="form-row" id="BackgroundImgDiv" name="cropBackgroundColorDiv">
                                <div id="inputBgImgSelect" setType="1" class="select-border" title="上传本地图片">
                                    <i class="fa fa-folder-open"></i>
                                </div>
                                <input id="bgImgSelectBtn" class="file" accept="image/*" type="file" hidden/>
                                <div imgSrc="file/background/bg-001.jpg" setType="0"
                                     style="background: url('file/background/bg-001.jpg')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/background/bg-002.jpg" setType="0"
                                     style="background: url('file/background/bg-002.jpg')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/background/bg-003.jpg" setType="0"
                                     style="background: url('file/background/bg-003.jpg')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/background/bg-004.png" setType="0" class="select-border"
                                     style="background: url('file/background/bg-004.png')">
                                </div>
                                <div imgSrc="file/background/bg-005.jpg" setType="0"
                                     style="background: url('file/background/bg-005.jpg')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/background/bg-006.jpg" setType="0"
                                     style="background: url('file/background/bg-006.jpg')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/background/bg-009.svg" setType="0"
                                     style="background: url('file/background/bg-009.svg')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/background/bg-007.gif" setType="0"
                                     style="background: url('file/background/bg-007.gif')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/background/bg-008.svg" setType="1"
                                     style="background: url('file/background/bg-008.svg')no-repeat;background-size: 100%"
                                     class="select-border">
                                </div>
                            </div>
                            <div class="form-row pl-1 pr-1">
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="rdoBgTile" name="rdoBgImg" value="0"
                                           checked="checked"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="rdoBgTile">平铺</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="rdoBgFill" name="rdoBgImg" value="1"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="rdoBgFill">填充</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="rdoBgCenter" name="rdoBgImg" value="2"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="rdoBgCenter">居中</label>
                                </div>
                            </div>
                            <div id="iptPageBgImgRow" class="form-row" hidden>
                                <div class="col-3">
                                    透明度
                                </div>
                                <div class="col-9 pl-0">
                                    <input id="iptPageBgImg" type="range" min="0" value="0" max="100"
                                           class="custom-range">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="CursorColorDiv">画板光标颜色</label>
                        <div id="pageCursorDiv">
                            <div class="form-row" id="CursorColorDiv" name="cropBackgroundColorDiv">
                                <div color="black" class="select-border my-select" style="background-color:black"
                                     title="黑色">
                                </div>
                                <div color="green" class="select-border" style="background-color:green" title="绿">
                                </div>
                                <div color="red" class="select-border" style="background-color:red" title="红">
                                </div>
                                <div color="yellow" class="select-border" style="background-color:yellow" title="黄色">
                                </div>
                                <div color="blue" class="select-border" style="background-color:blue" title="蓝色">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane rounded h-100 w-100" id="panelFunCommon" role="tabpanel">
                    <div class="form-group my-show my-show-pen my-show-spray my-show-word my-show-shape">
                        <label for="form-row-pen" class="my-show my-show-pen my-show-spray">画笔</label>
                        <label for="form-row-pen" class="my-show my-show-shape">填充</label>
                        <div class="form-row my-show my-show-pen my-show-spray" id="form-row-pen">
                            <div class="col-3">
                                宽度
                            </div>
                            <div class="col-9 pl-0">
                                <input id="iptPenWidth" type="range" min="1" value="1" max="100" title=""
                                       class="custom-range">
                            </div>
                        </div>
                        <div class="form-row my-show my-show-word" id="wordFontDiv">
                            <div class="col">
                                <select id="selectFontFamily" class="custom-select custom-select-sm"
                                        title="选择字体">
                                    <option selected="selected" value="Microsoft YaHei">微软雅黑</option>
                                    <option value="SimHei">黑体</option>
                                    <option value="SimSun">宋体</option>
                                    <option value="Arial">楷体</option>
                                    <option value="STXingkai">华文行楷</option>
                                    <option value="FZYaoti">方正姚体</option>
                                    <option value="YouYuan">幼圆</option>
                                    <option value="LiSu">隶书</option>
                                    <option value="STLiti">华文隶书</option>
                                    <option value="STCaiyun">华文彩云</option>
                                    <option value="Calibri">Calibri</option>
                                    <option value="Times New Roman">Times New Roman</option>
                                </select>
                            </div>
                            <div class="col">
                                <select id="selectFontSize" class="custom-select custom-select-sm"
                                        title="选择字号大小">
                                    <option selected="selected" value="16">字号</option>
                                    <option value="6">6</option>
                                    <option value="8">8</option>
                                    <option value="10">10</option>
                                    <option value="12">12</option>
                                    <option value="14">14</option>
                                    <option value="16">16</option>
                                    <option value="18">18</option>
                                    <option value="21">21</option>
                                    <option value="24">24</option>
                                    <option value="28">28</option>
                                    <option value="32">32</option>
                                    <option value="36<">36</option>
                                    <option value="42<">42</option>
                                    <option value="48<">48</option>
                                    <option value="56<">56</option>
                                    <option value="64<">64</option>
                                    <option value="72<">72</option>
                                    <option value="80<">80</option>
                                    <option value="88<">88</option>
                                    <option value="96<">96</option>
                                    <option value="104">104</option>
                                    <option value="120">120</option>
                                    <option value="144">144</option>
                                    <option value="168">168</option>
                                    <option value="200">200</option>
                                    <option value="250">250</option>
                                    <option value="250">300</option>
                                    <option value="350">350</option>
                                    <option value="400">400</option>
                                    <option value="500">500</option>
                                    <option value="600">600</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row my-show my-show-word pt-1">
                            <div id="fontWeightDiv" class="select-border" title="加粗">
                                <i class="fa fa-bold"></i>
                            </div>
                            <div id="fontStyleDiv" class="select-border" title="斜体">
                                <i class="fa fa-italic"></i>
                            </div>
                            <div id="fontUnderLineDiv" class="select-border" title="下划线">
                                <i class="fa fa-underline"></i>
                            </div>
                            <div id="fontOverLineDiv" class="select-border" title="上划线" style="line-height:normal">
                                <i class="fa fa-minus"></i>
                            </div>
                            <div id="fontThroughLineDiv" class="select-border" title="划线">
                                <i class="fa fa-minus"></i>
                            </div>
                        </div>
                        <div class="form-row my-show my-show-word pt-1">
                            <div class="col-3">
                                字间距
                            </div>
                            <div class="col-9 pl-0">
                                <input id="rangeFontW" type="range" min="0" value="0" max="800" title=""
                                       class="custom-range">
                            </div>
                        </div>
                        <div class="form-row my-show my-show-word pt-1">
                            <div class="col-3">
                                行间距
                            </div>
                            <div class="col-9 pl-0">
                                <input id="rangeFontH" type="range" min="5" value="5" max="32" title=""
                                       class="custom-range">
                            </div>
                        </div>
                        <div id="colorDiv" class="my-show my-show-pen my-show-spray my-show-word my-show-shape">
                            <div class="form-row" id="colorPanel" name="cropBackgroundColorDiv">
                                <div id="inputColorSelectDiv" class="select-border">
                                    <div id="inputColorSelect">
                                    </div>
                                </div>
                                <div color="#38b6ff" class="select-border" style="background-color:#38b6ff"
                                     title="淡蓝色">
                                </div>
                                <div color="#8c52ff" class="select-border" style="background-color:#8c52ff"
                                     title="紫色">
                                </div>
                                <div color="#cb6ce6" class="select-border" style="background-color:#cb6ce6"
                                     title="紫红色">
                                </div>
                                <div color="#7ed957" class="select-border" style="background-color:#7ed957"
                                     title="绿色">
                                </div>
                                <div color="#c9e265" class="select-border" style="background-color:#c9e265"
                                     title="黄绿色">
                                </div>
                                <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                     title="黄色">
                                </div>
                                <div color="#ff914d" class="select-border" style="background-color:#ff914d"
                                     title="橙色">
                                </div>
                                <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                     title="粉色">
                                </div>
                                <div color="#000000" class="select-border my-select"
                                     style="background-color:#000000"
                                     title="黑色">
                                </div>
                            </div>
                        </div>
                        <div id="colorImgDiv" class="my-show my-show-pen">
                            <div class="form-row" id="colorImgDivRow" name="cropBackgroundColorDiv">
                                <div id="inputColorImgSelect" class="select-border" title="上传本地图片">
                                    <i class="fa fa-folder-open"></i>
                                </div>
                                <input id="colorImgSelectBtn" class="file" accept="image/*" type="file" hidden/>
                                <div imgSrc="file/pen/color.jpg" class="select-border"
                                     style="background: url('file/pen/color.jpg')">
                                </div>
                                <div imgSrc="file/pen/pen-001.gif"
                                     style="background: url('file/pen/pen-001.gif')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/pen/pen-002.gif"
                                     style="background: url('file/pen/pen-002.gif')"
                                     class="select-border">
                                </div>
                                <div imgSrc="file/pen/pen-003.gif"
                                     style="background: url('file/pen/pen-003.gif')"
                                     class="select-border">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group my-show my-show-word">
                        <label for="shadowDivWrap">背景</label>
                        <div id="fontBkDivWrap">
                            <div class="form-row">
                                <div id="fontBkColorSelectDiv" class="select-border">
                                    <div id="fontBkColorSelect">
                                    </div>
                                </div>
                                <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                     title="粉色">
                                </div>
                                <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                </div>
                                <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                     title="黄色">
                                </div>
                                <div color="#5ce1e6" class="select-border" style="background-color:#5ce1e6"
                                     title="青色">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group my-show my-show-word my-show-shape">
                        <label class="my-show my-show-word">字边</label>
                        <label class="my-show my-show-shape">边框</label>
                        <div class="form-row">
                            <div class="col-3">
                                边框宽
                            </div>
                            <div class="col-9 pl-0">
                                <input id="fontBorder" type="range" min="0" value="0" max="100"
                                       class="custom-range">
                            </div>
                        </div>
                        <div id="fontBorderDivWrap">
                            <div class="form-row">
                                <div id="fontBorderColorSelectDiv" class="select-border">
                                    <div id="fontBorderColorSelect">
                                    </div>
                                </div>
                                <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                     title="粉色">
                                </div>
                                <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                </div>
                                <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                     title="黄色">
                                </div>
                                <div color="#5ce1e6" class="select-border" style="background-color:#5ce1e6"
                                     title="青色">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group my-show my-show-pen my-show-spray my-show-word my-show-shape">
                        <label for="shadowDivWrap">阴影</label>
                        <div class="form-row" id="shadowDiv">
                            <div class="col-3">
                                影宽度
                            </div>
                            <div class="col-9 pl-0">
                                <input id="iptShadowWidth" type="range" min="0" value="0" max="50"
                                       class="custom-range">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-3">
                                偏移量
                            </div>
                            <div class="col-9 pl-0">
                                <input id="rangOffset" type="range" min="0" value="0" max="50"
                                       class="custom-range">
                            </div>
                        </div>
                        <div id="shadowDivWrap">
                            <div class="form-row">
                                <div id="shadowColorSelectDiv" class="select-border">
                                    <div id="shadowColorSelect">
                                    </div>
                                </div>
                                <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                     title="粉色">
                                </div>
                                <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                </div>
                                <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                     title="黄色">
                                </div>
                                <div color="#5ce1e6" class="select-border" style="background-color:#5ce1e6"
                                     title="青色">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group my-show my-show-resize">
                        <div class="form-row p-1">
                            <div class="btn-group btn-group-sm w-100">
                                <button id="btnFlipX" type="button" class="btn btn-dark"
                                        title="水平翻转">
                                    <i class="fa fa-arrows-alt-h" title="水平翻转"></i>
                                </button>
                                <button id="btnFlipY" type="button" class="btn btn-dark"
                                        title="垂直翻转">
                                    <i class="fa fa-arrows-alt-v" title="垂直翻转"></i>
                                </button>
                                <button id="btnIndexLast" type="button" class="btn btn-dark"
                                        title="层级移到最后">
                                    <i class="fa fa-angle-down" title="层级移到最后"></i>
                                </button>
                                <button id="btnIndexForefront" type="button" class="btn btn-dark"
                                        title="层级移到最前">
                                    <i class="fa fa-angle-up" title="层级移到最前"></i>
                                </button>
                                <button id="btnIndexDown" type="button" class="btn btn-dark"
                                        title="层级向后">
                                    <i class="fa fa-angle-double-down" title="层级向后"></i>
                                </button>
                                <button id="btnIndexUp" type="button" class="btn btn-dark"
                                        title="层级向前">
                                    <i class="fa fa-angle-double-up" title="层级向前"></i>
                                </button>
                            </div>
                        </div>
                        <div class="form-row p-1">
                            <div class="btn-group btn-group-sm w-100">
                                <button id="btnGroup" type="button" class="btn btn-dark"
                                        title="成组">
                                    <i class="fa fa-object-group" title="成组"></i>
                                </button>
                                <button id="btnUnGroup" type="button" class="btn btn-dark"
                                        title="取消成组">
                                    <i class="fa fa-object-ungroup" title="取消成组"></i>
                                </button>
                                <button id="btnCopy" type="button" class="btn btn-dark"
                                        title="复制">
                                    <i class="fa fa-copy" title="复制"></i>
                                </button>
                                <button id="btnDel" type="button" class="btn btn-dark"
                                        title="删除">
                                    <i class="fa fa-trash" title="删除"></i>
                                </button>
                            </div>
                        </div>
                        <div class="form-row p-1">
                            <div class="col-4">
                                横向翻转
                            </div>
                            <div class="col-8 pl-0">
                                <input id="rangeScaleX" type="range" min="-100" value="100" max="100"
                                       class="custom-range">
                            </div>
                        </div>
                        <div class="form-row p-1">
                            <div class="col-4">
                                纵向翻转
                            </div>
                            <div class="col-8 pl-0">
                                <input id="rangeScaleY" type="range" min="-100" value="100" max="100"
                                       class="custom-range">
                            </div>
                        </div>
                        <div class="form-row p-1">
                            <div class="col-4">
                                横向拉伸
                            </div>
                            <div class="col-8 pl-0">
                                <input id="rangeSkewX" type="range" min="-300" value="0" max="300"
                                       class="custom-range">
                            </div>
                        </div>
                        <div class="form-row p-1">
                            <div class="col-4">
                                纵向拉伸
                            </div>
                            <div class="col-8 pl-0">
                                <input id="rangeSkewY" type="range" min="-300" value="0" max="300"
                                       class="custom-range">
                            </div>
                        </div>
                    </div>
                    <div class="form-group my-show my-show-resize">
                        <label>圆角</label>
                        <div class="form-row">
                            <div class="col-4">
                                横向边角
                            </div>
                            <div class="col-8 pl-0">
                                <input id="rangeAngleX" type="range" min="0" value="0" max="150"
                                       class="custom-range">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-4">
                                纵向边角
                            </div>
                            <div class="col-8 pl-0">
                                <input id="rangeAngleY" type="range" min="0" value="0" max="150"
                                       class="custom-range">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="panelCenter" class="col-9 h-100 overflow-hidden">
            <div id="panelDrawDiv" class="position-relative rounded shadow bg-secondary w-100 h-100 overflow-hidden">
                <!--note-->
                <div id="panelDrawNotes"
                     class="position-absolute p-3 w-100 m-0 h-100 overflow-hidden my-sm-overflow-scroll">
                    <div class="row">
                        <div class="col-sm-7">
                            <div class="card bg-dark text-white shadow-lg">
                                <div class="card-body h-100 overflow-hidden">
                                    <h5 class="card-title">速写板 suxieban.com</h5>
                                    <p class="card-text">让手写、画图更快捷高效
                                    </p>
                                    <p><i class="fa fa-user-astronaut"></i> <b>支持超清图片、SVG图片、编辑文件</b>生成及导入（推荐谷歌chrome浏览器）。
                                    </p>
                                    <p><i class="fa fa-user-secret"></i><b> 隐私保护</b>: 全部操作均在您本地设备完成，<b>不会上传</b> 至
                                        服务器及网络。</p>
                                    <p><i class="fa fa-seedling"></i> 有一种意境，总会在晨风吹拂中，让我们领悟到人生的坚强。</p>
                                    <div class="row text-center">
                                        <div class="col-3">
                                            <a href="#" class="btn rounded-pill btn-dark border-secondary btn-start"
                                               title="开始创作"
                                               data-trigger="focus"> <i class="fa fa-tablet-alt text-warning"></i>
                                                速写板</a>
                                        </div>
                                        <div class="col-3">
                                            <a href="https://www.sukoutu.com" target="_blank"
                                               class="btn rounded-pill btn-dark border-secondary file-btn">
                                                <i
                                                        class="fa fa-crop text-warning"></i> 速抠图</a>
                                        </div>
                                        <div class="col-3">
                                            <a href="#" class="btn rounded-pill btn-dark border-secondary"
                                               data-toggle="popover" data-html="true" data-placement="top"
                                               title="速拼图 supintu.com"
                                               data-trigger="focus"
                                               style="border-style: dashed"
                                               data-content="速拼图 是一款正在研发中的在线图片设计及拼合工具，快捷高效的帮您制作并拼合成精美的图片。届时 速拼图 与 速抠图 协同作为图片处理的双引擎 将成为您的左膀右臂。<span class='badge badge-primary'>请扫一扫关注</span><div class='text-center'><img class='w-50' src='file/weixin_suxieban.jpg'/></div>"
                                            > <i class="fa fa-image"></i> 速拼图</a>
                                        </div>
                                        <div class="col-3">
                                            <a href="#" class="btn rounded-pill btn-dark border-secondary"
                                               data-toggle="popover" data-html="true" data-placement="top"
                                               title="速设计 susheji.com"
                                               data-trigger="focus"
                                               style="border-style: dashed"
                                               data-content="速设计 是一款待研发的在线产品方案设计工具，基于素材库，快捷高效的帮您设计、制作并分享方案。感谢您的支持。<span class='badge badge-primary'>请扫一扫关注</span><div class='text-center'><img class='w-50' src='file/weixin_suxieban.jpg'/></div>"
                                            > <i class="fa fa-pencil-alt"></i> 速设计
                                            </a>
                                        </div>
                                    </div>
                                    <div class="row mt-3 text-center">
                                        <div class="col">
                                            <a href="#"
                                               class="btn btn-block rounded btn-dark border-secondary btn-start">
                                                开始创作
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5 mt-1 mt-sm-0 pl-sm-0  ">
                            <div class="card bg-dark text-white shadow-lg h-100 ">
                                <div class="card-body p-1 h-100 overflow-hidden">
                                    <div class="divAds">
                                        <!--                                        <script async-->
                                        <!--                                                src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
                                        <!--                                        <ins class="adsbygoogle"-->
                                        <!--                                             style="display:block"-->
                                        <!--                                             data-ad-client="ca-pub-8551674815797939"-->
                                        <!--                                             data-ad-slot="4924605572"-->
                                        <!--                                             data-ad-format="auto"-->
                                        <!--                                             data-full-width-responsive="true"></ins>-->
                                        <!--                                        <script>-->
                                        <!--                                            (adsbygoogle = window.adsbygoogle || []).push({});-->
                                        <!--                                        </script>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-7">
                            <div class="card bg-dark text-white shadow h-100">
                                <div class="card-body text-center">
                                    <h5 class="card-title">微信扫一扫，手机使用 <span class="text-warning">速抠图、速写板、速拼图、速设计</span>。
                                    </h5>
                                    <div class="card-text">
                                        <img style="width: 7rem; height: 7rem;" src='file/weixin_suxieban.jpg'/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5 mt-1 mt-sm-0 pl-sm-0 my-sm-hide ">
                            <div class="card bg-dark text-white shadow-lg h-100 ">
                                <div class="card-body p-1 h-100 overflow-hidden">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="card bg-secondary">
                                                <div class="card-body text-center">
                                                    <img class="card-img-top" src="file/ads/tb_01.jpg"
                                                         alt="小米米家液晶小黑板|手写板|画图|画画"/>
                                                    <br/>
                                                    <a href="https://s.click.taobao.com/TgWKcov" target="_blank"
                                                       class="mt-2 btn btn-sm btn-dark border-secondary">进入店铺</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="card bg-secondary">
                                                <div class="card-body text-center">
                                                    <img class="card-img-top" src="file/ads/tb_02.jpg"
                                                         alt="超大号儿童画画板磁性写字板"/>
                                                    <br/>
                                                    <a href="https://s.click.taobao.com/xex9cov" target="_blank"
                                                       class="mt-2 btn btn-sm btn-dark border-secondary">进入店铺</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="card bg-secondary">
                                                <div class="card-body text-center">
                                                    <img class="card-img-top" src="file/ads/tb_03.jpg"
                                                         alt="儿童液晶手写板宝宝涂鸦板绘画画板电子光能彩色写字板家用小黑板"/>
                                                    <br/>
                                                    <a href="https://s.click.taobao.com/klg6cov" target="_blank"
                                                       class="mt-2 btn btn-sm btn-dark border-secondary">进入店铺</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--                        <div class="col-sm-5 mt-1 mt-sm-0 ">-->
                        <!--                            <div class="card bg-dark text-white shadow-lg h-100 ">-->
                        <!--                                <div class="card-body p-1 h-100 overflow-hidden">-->
                        <!--                                    <a href="https://ac.aliyun.com/pages/bkshare?userCode=cqhx2s4t" target="_blank">-->
                        <!--                                        <img class="w-100 h-100" src="file/ads/640-119.png">-->
                        <!--                                    </a>-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </div>
                <div id="panelDiv" class="bg-light">
                    <canvas class="w-100 h-100 paper" id="panel"></canvas>
                </div>
            </div>
            <!--菜单把手-->
            <div id="leftSlider" class="position-absolute rounded-right text-white"
                 style="width: 32px;height: 112px; left: 0%; top: 50%; margin-top: -56px; margin-left: -17px">
                <svg id="panelFunsliderIcon" cursor="pointer" width="32" height="112"
                     xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <title></title>
                        <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
                    </g>
                    <g>
                        <title></title>
                        <path fill="#1b1e21"
                              d="m22.626,17.865l-1.94,-1.131c-3.002,-1.753 -4.686,-4.126 -4.686,-6.601l0,-10.133l-16,0l0,112l16,0l0,-10.135c0,-2.475 1.684,-4.849 4.686,-6.6l1.94,-1.131c6.002,-3.502 9.374,-8.249 9.374,-13.2l0,-49.87c0,-4.95 -3.372,-9.698 -9.374,-13.199"/>
                        <text font-weight="bold" xml:space="preserve" text-anchor="start"
                              font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_2" y="63"
                              x="17.28125" stroke-width="0" stroke="#000" fill="#e5e5e5">||</text>
                    </g>
                </svg>
            </div>
            <div id="rightSlider" class="position-absolute rounded-right text-white"
                 style="width: 32px;height: 112px; right: 0%; top: 50%; margin-top: -56px; margin-right: -17px">
                <svg id="panelFunsliderIcon" cursor="pointer" width="32" height="112"
                     style="transform: rotate(180deg);"
                     xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <title></title>
                        <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
                    </g>
                    <g>
                        <title></title>
                        <path fill="#1b1e21"
                              d="m22.626,17.865l-1.94,-1.131c-3.002,-1.753 -4.686,-4.126 -4.686,-6.601l0,-10.133l-16,0l0,112l16,0l0,-10.135c0,-2.475 1.684,-4.849 4.686,-6.6l1.94,-1.131c6.002,-3.502 9.374,-8.249 9.374,-13.2l0,-49.87c0,-4.95 -3.372,-9.698 -9.374,-13.199"/>
                        <text font-weight="bold" xml:space="preserve" text-anchor="start"
                              font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_2" y="63"
                              x="17.28125" stroke-width="0" stroke="#000" fill="#e5e5e5">||</text>
                    </g>
                </svg>
            </div>
        </div>
        <div id="panelRight" class="col-1  bg-dark  h-auto  w-100 h-100 pt-0 pl-0 overflow-hidden">
            <div class="my-bg-dark h-100 rounded p-2">
                <div id="svgPanel" class="form-row my-sm-hide">
                    <div class="select-border-sm my-select  bgImgFill" title="直角三角形"
                         style="background-image: url('file/shape/angle.svg')"></div>
                    <div class="select-border-sm my-select  bgImgFill" title="平行四边形"
                         style="background-image: url('file/shape/four.svg')"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/trapezoid.svg')"
                         title="梯形"></div>
                    <div class="select-border-sm my-select  bgImgFill" title="五边形"
                         style="background-image: url('file/shape/five.svg')"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/six.svg')"
                         title="六边形"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/eight.svg')"
                         title="八边形"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/ten.svg')"
                         title="十边形"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/circle-point.svg')"
                         title="空心圆"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/cylinder.svg')"
                         title="圆柱形"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/star.svg')"
                         title="五角星"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/heart.svg')"
                         title="心形"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-one.svg')"
                         title="提示"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-02.svg')"
                         title="提示"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-03.svg')"
                         title="提示"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-04.svg')"
                         title="提示"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-01.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-02.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-03.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-04.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-08.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-07.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-15.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-09.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-14.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-10.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-06.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-05.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-11.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-12.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-13.svg')"
                         title="箭头"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-03.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-02.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-05.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-06.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-07.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-08.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-04.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-09.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-11.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-14.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-04.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/other-02.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-01.svg')"
                         title="flowchart"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/other-one.svg')"
                         title="复杂图形"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/note.svg')"
                         title="便签"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/note.svg')"
                         title="便签"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/note.svg')"
                         title="便签"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-01.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-02.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-03.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-04.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-05.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-06.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-07.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-08.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-09.svg')"
                         title="其他"></div>
                    <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-10.svg')"
                         title="其他"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottomRowDiv" class="row bg-dark">
        <p class="col mx-auto text-secondary m-0 text-center text-sm-right text-sm-right"
           style="font-size:12px; line-height:1rem">
            &copy;2019 SUXIEBAN |
            <a class="text-secondary"
               href="http://www.beian.miit.gov.cn"
               target="_blank">京ICP备19019995号-5</a>
            | <a class="text-secondary" href="page/note/statement.html"
                 target="_blank">免责声明 </a>
        </p>
    </div>
    <div class="modal fade bd-example-modal" tabindex="-1" role="dialog" id="modalInfo">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">消息提示</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bd-example-modal" tabindex="-1" role="dialog" id="modalConfirm">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认提示</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn sure btn-primary" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn cancel btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bd-example-modal p-0 m-0" tabindex="-1" role="dialog" id="modalIframe">
        <div class="modal-dialog  my-mode-iframe p-0 m-0 w-100 h-100 modal-dialog-centered">
            <div class="modal-content h-100  p-0 m-0">
                <div class="modal-header p-1 m-0 overflow-hidden">
                    <h6 class="modal-title">速抠图 <a href="https://www.sukoutu.com" target="_blank">sukoutu.com</a></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body p-0 m-0 h-100 overflow-hidden">
                    <iframe class="w-100 h-100 border-0 p-0 m-0">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bd-example-modal" tabindex="-1" role="dialog" id="saveShow">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">图片保存</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body mx-auto" style="text-align: center;">
                </div>
            </div>
        </div>
    </div>
    <div id="rightMenu" class="position-absolute w-auto h-auto">
        <span id="rightMenuBtn" data-toggle="dropdown">
    </span>
        <div id="rightMenuCon" class="dropdown-menu dropdown-menu-left">
            <a id="btnMenuCopy" class="dropdown-item" href="#" title="复制">
                <i class="fa fa-copy"></i> 复制
            </a>
            <a id="btnMenuDel" class="dropdown-item" href="#">
                <i class="fa fa-trash-alt" title="删除"></i> 删除
            </a>
            <div class="dropdown-divider"></div>
            <a id="btnMenuIndexLast" class="dropdown-item" href="#">
                <i class="fa fa-angle-double-down" title="层级移到最后"></i> 移到最后
            </a>
            <a id="btnMenuIndexForefront" class="dropdown-item" href="#">
                <i class="fa fa-angle-double-up" title="层级移到最前"></i> 移到最前
            </a>
            <a id="btnMenuIndexDown" class="dropdown-item" href="#">
                <i class="fa fa-angle-down" title="层级向后"></i> 后移
            </a>
            <a id="btnMenuIndexUp" class="dropdown-item" href="#">
                <i class="fa fa-angle-up" title="层级向前"></i> 前移
            </a>
            <div class="dropdown-divider"></div>
            <a id="btnMenuFlipY" class="dropdown-item" href="#">
                <i class="fa fa-arrows-alt-v" title="垂直翻转"></i>&nbsp;&nbsp; 垂直翻转
            </a>
            <a id="btnMenuFlipX" class="dropdown-item" href="#">
                <i class="fa fa-arrows-alt-h" title="水平翻转"></i> 水平翻转
            </a>
            <div class="dropdown-divider"></div>
            <a id="btnOtherOptionSet" class="dropdown-item" href="#">
                <i class="fa fa-hand-paper" title="其他操作"></i> 其他操作
            </a>
        </div>
    </div>
</div>

<!--module.js-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-149577290-3"></script>
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());

    gtag('config', 'UA-149577290-3');
</script>

<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?826c77ed110cd3269fab003ea90490ae";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>
    (function (b, a, e, h, f, c, g, s) {
        b[h] = b[h] || function () {
            (b[h].c = b[h].c || []).push(arguments)
        };
        b[h].s = !!c;
        g = a.getElementsByTagName(e)[0];
        s = a.createElement(e);
        s.src = "//s.union.360.cn/" + f + ".js";
        s.defer = !0;
        s.async = !0;
        g.parentNode.insertBefore(s, g)
    })(window, document, "script", "_qha", 336288, false);
</script>
</body>
</html>
收起
创客教育作业--儿童画板

儿童画画板

卡通儿童画画学习html网站模板下载

画板的程序

行业资料-电子功用-儿童电子绘画板的介绍分析.rar

windows小画板程序

行业资料-交通装置-一种带画板的儿童学步推车.exe

电子政务-儿童益智电脑式画板.zip

一种儿童学前教育用画板的制作方法.docx

液晶手写板原理拆解_天猫babycare儿童液晶手写板详情页拆解

C# 经典个人小画板

HTML5手机端画板涂鸦代码

16.神奇画笔-炫彩画板-项目源码与素材，Scratch少儿编程，经典教学作品，儿童益智游戏

用VC做画板的开发

液晶电子手写板，达威尔儿童涂鸦画板手写板，写字板手绘板绘画板

在线画板_在线画画_在线画图工具-速写板

达威尔液晶电子手写板儿童涂鸦画板写字板，培养小孩创造力和想象力的好工具！

每个孩子都该拥有的神奇画板，感觉自己的童年弱爆了丨钛空舱

Draw_flower.zip

小画板

画板画图软件下载-画板画图安卓版v1.1.0-PC6安卓网

决定了，儿童节我们用python画这个...

【2022年】儿童学习桌推荐良心避坑指南，有哪些儿童学习桌品牌值得推荐

6大关键词解析儿童学习桌消费市场

选色工具练习.sb2

少儿创意学编程（Scratch基础篇）：第5课——绘画板

产品之我见（4）-由儿童软件《汉字王国》引发的思考

Windows CE 程序设计（第一版）
