原生js实现一个可随意拖拽的画板代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：原生js实现一个可随意拖拽的画板代码，支持多种笔头、支持喷墨、支持下载保存图片、支持力度调节。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        font:inherit;
        vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
        display:block
}
body {
        line-height:1
}
ol,ul {
        list-style:none
}
blockquote,q {
        quotes:none
}
blockquote:after,blockquote:before,q:after,q:before {
        content:"";
        content:none
}
table {
        border-collapse:collapse;
        border-spacing:0
}
* {
        box-sizing:border-box;
        -webkit-font-smoothing:antialiased;
        text-shadow:1px 1px 1px rgba(41,41,41,0.004);
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        -o-user-select:none;
        user-select:none
}
body,html {
        margin:0;
        display:flex;
        justify-content:center;
        align-items:center
}
body {
        min-height:100vh;
        min-width:100vw;
        background:#626262;
        font-family:Helvetica
}
.brushPanel,.imgNav,.sprayPanel {
        height:180px;
        width:266.6px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        background:#535353;
        top:15px;
        right:15px;
        position:absolute;
        border-top-right-radius:5px;
        border-top-left-radius:5px;
        box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
        z-index:999
}
.brushPanel,.sprayPanel {
        left:15px;
        right:auto;
        height:100px;
        width:266.6px;
        border-top-right-radius:0;
        border-top-left-radius:0
}
img {
        width:250px;
        height:133.33px;
        display:block;
        border-radius:5px
}
#canvasImg {
        z-index:200
}
#canvasBgImg {
        background:#fff;
        background:url(//repo.bfw.wiki/bfwrepo/images/cavas/canvasBg.png) 50%;
        background-size:15px;
        background-position:-1.5px top;
        position:absolute;
        top:33.2px;
        top:calc(50%+10px);
        left:50%;
        transform:translatex(-50%) translatey(-50%)
}
#draw {
        cursor:crosshair!important;
        z-index:200
}
#canvasBg {
        top:50%;
        left:50%;
        transform:translatex(-50%) translatey(-50%);
        background:url(//repo.bfw.wiki/bfwrepo/images/cavas/canvasBg.png) 50%;
        background-size:50px;
        position:absolute;
        z-index:-1
}
.toolbar {
        position:absolute;
        left:200px;
        top:200px;
        height:auto;
        width:50px;
        flex-wrap:wrap;
        flex-direction:column;
        align-items:flex-start;
        background:#535353;
        border-top-right-radius:5px;
        border-top-left-radius:5px;
        box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
        z-index:999
}
.imgNavTitle,.toolbar,.toolTitle {
        display:flex;
        justify-content:flex-start
}
.imgNavTitle,.toolTitle {
        background:#434343;
        height:20px;
        width:100%;
        border-radius:inherit;
        color:#dcdcdc;
        align-items:center;
        padding-left:5px;
        font-size:10px
}
.toolTitle {
        transform:translateX(-1px);
        width:52px
}
.imgNavTitle,.panelTitle,.sprayPaneTitle {
        transform:translateY(-15px)
}
.panelTitle,.sprayPaneTitle {
        transform:translateY(-8px);
        width:calc(100%+100px);
        z-index:500;
        margin-left:100px;
        border-top-right-radius:5px;
        border-top-left-radius:5px;
        height:20px
}
.sprayPaneTitle {
        width:100%;
        margin-left:0
}
.tool {
        height:45px;
        width:50px;
        border:1px solid transparent;
        display:flex;
        justify-content:center;
        align-items:center;
        cursor:pointer;
        background:#535353;
        color:#dcdcdc;
        border-radius:5px;
        transition:all 0s ease;
        position:relative
}
.tool:hover {
        border-radius:5px!important;
        background-color:#383838;
        border-color:#636363;
        transition:all .2s linear
}
.tool:after {
        content:attr(data-tool-tip);
        width:10px;
        min-height:20px;
        background:#383838;
        top:0;
        left:100%;
        margin-left:10px;
        padding:5px;
        position:absolute;
        justify-content:center;
        align-items:center;
        text-align:center;
        font-size:10px;
        font-weight:700;
        transform:translateY(25%) translateX(-210%);
        display:flex;
        opacity:0;
        z-index:-1;
        border-radius:5px
}
.tool:hover:after {
        margin-left:5px;
        opacity:1;
        min-width:150px;
        transform:translateY(25%) translateX(0);
        transition:transform 0s linear 1.5s,width 1.5s linear 0s,opacity .5s linear 1.5s
}
#download,.bg,.brush,.clear,.eraser,.nav,.rainbow,.save,.spray {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/paintBrush.svg);
        background-position:50%;
        background-repeat:no-repeat
}
.eraser {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/eraser.svg)
}
.bg {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/paintBucket.svg)
}
.clear {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/clear.svg)
}
.save {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/save.svg)
}
.rainbow {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/rainbow.svg)
}
.nav {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/nav.svg)
}
.spray {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/spraycan.svg)
}
#download {
        background-image:url(//repo.bfw.wiki/bfwrepo/images/cavas/download.svg)
}
a#download,a#download:active,a#download:hover,a#download:visited {
        height:100%;
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        color:#dcdcdc;
        text-decoration:none
}
label {
        color:#dcdcdc;
        font-size:11px;
        font-weight:700
}
.sizeLabel {
        margin-top:5px
}
input[type=color] {
        -webkit-appearance:none;
        background:transparent;
        border-radius:5px;
        outline:0
}
input[type=color]::-webkit-color-swatch-wrapper {
        padding:2px 1px;
        height:26px;
        width:26px
}
input[type=color]::-webkit-color-swatch {
        border:0;
        border-radius:5px;
        border:2px solid #383838
}
input[type=range] {
        width:200px
}
.brushSizePreview {
        width:10px;
        height:10px;
        border-radius:50%;
        background:#e53935;
        display:block
}
.brushSizePreviewCont {
        position:absolute;
        top:0;
        right:0;
        transform:translateX(100px);
        background:inherit;
        width:100px;
        height:100%;
        bottom:0;
        border-top-right-radius:0;
        border-top-left-radius:0;
        box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
        display:flex;
        justify-content:center;
        align-items:center;
        padding-top:10px
}
.active {
        background-color:#383838;
        border-color:#636363
}
.hide {
        display:none
}
.cross {
        cursor:pointer;
        background:0
}
.drag {
        cursor:move
}
.preview {
        height:10px;
        width:10px;
        display:block;
        position:absolute;
        top:0;
        left:0;
        background:red;
        z-index:999;
        border-radius:10px;
        cursor:crosshair
}

</style>
</head>

<body>

    <!-- partial:index.partial.html -->

    <body ondragover="dragOver(event)" ondrop="drop(event)"><canvas id="draw" width="800" height="450"></canvas><canvas id="canvasBg" width="800" height="450"></canvas>
        <div class="imgNav drag" draggable="true" ondragstart="dragStart(event)" id="imgNav">
            <div class="imgNavTitle"><span class="cross" id="imgNavCross">&#x2715;</span></div><img id="canvasImg" draggable="false" /><img .........完整代码请登录后点击上方下载按钮下载查看