原生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
}.........完整代码请登录后点击上方下载按钮下载查看