原生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 id="canvasBgImg" draggable="false" /></div>
        <div class="brushPanel hide" id="brushPanel">
            <div class="toolTitle panelTitle"><span class="cross" id="panelCross">&#x2715;</span></div><label for="brushSize" class="sizeLabel">Size</label>
            <div class="brushSizePreviewCont"><label for="brushSize" class="brushSizePreview"></label></div><input type="range" class="brushSize" id="brushSize" value="10" min="1" max="80"><label for="brushOpacity">Opacity</label><input type="range" class="brushOpacity" value="1" min="0.1"
                max="1" step=".1" id="brushOpacity"></div>
        <div class="sprayPanel hide" id="sprayPanel">
            <div class="toolTitle sprayPaneTitle"><span class="cross" id="sprayPanelCross">&#x2715;</span></div><label for="sprayDensity" class="sizeLabel">Density</label><input type="range" class="sprayDensity" id="sprayDensity" value="50" min="5" max="300"><label for="sprayRadius">Radius</label>
            <input
                type="range" class="sprayRadius" value="20" min="20" max="80" step="1" id="sprayRadius"></div>
        <div class="toolbar drag" id="drag-tool" draggable="true" ondragstart="dragStart(event)">
            <div class="toolTitle">&#x2715;</div>
            <div class="tool brush" data-tool-tip="Brush Size &amp; Opacity"></div>
            <div class="tool rainbow" data-tool-tip="Rainbow Brush Tool"></div>
            <div class="tool spray" data-tool-tip="Spray Can Tool"></div>
            <div class="tool bg" data-tool-tip="Change Background Colour"></div>
            <div class="tool eraser" id="eraserTool" data-tool-tip="Eraser Tool"></div>
            <div class="tool nav active" data-tool-tip="Navigator Hide/Show"></div>
            <div class="tool save" data-tool-tip="Save Canvas"></div>
            <div class="tool clear" data-tool-tip="Clear Canvas"></div>
            <div class="tool dl" data-tool-tip="Download As PNG">
                <a id="download"></a>
            </div><input type="color" class="tool colorSelector" value="#e53935" data-tool-tip="Select Colour"></div>
    </body>
    <!-- partial -->
    <script >
     "use strict";

 function loadCanvas() {
     var c = localStorage.getItem("canvas"),
         b = new Image();
     (b.src = c), (b.onload = function() {
         ctx.drawImage(b, 0, 0)
     }), (document.getElementById("canvasImg").src = c || error)
 }

 function loadCanvasBg() {
     var c = localStorage.getItem("canvasBg"),
         b = new Image();
     (b.src = c), (b.onload = function() {
         ctxBg.drawImage(b, 0, 0)
     }), (document.getElementById("canvasBgImg").src = c || .........完整代码请登录后点击上方下载按钮下载查看