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

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

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