js编写一个canvas画板工具效果代码
代码语言：html
所属分类：其他
代码描述：js编写一个canvas画板工具效果代码，可自己导出图片
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body,html {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 0 0 no-repeat;
background-size: cover;
overflow: hidden;
font-family: "Microsoft yahei";
background-color: #fff;
}
li {
list-style-type: none;
}
ul {
padding-left: 10px
}
h1 {
position: fixed;
left: 15px;
top: 5px;
width: 250px;
height: 60px;
color: #ff5e83;
font-size: 26px;
line-height: 60px;
text-align: center;
background-color:;
}
canvas {
position: fixed;
left: 280px;
top: 5px;
display: block;
cursor: pointer;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
.container {
width: 250px;
height: 60px;
position: fixed;
left: 15px;
top: 70px;
}
.container h2 {
width: 100%;
height: 60px;
font-size: 22px;
text-align: center;
color: #ff377e;
font-weight: normal;
line-height: 60px;
border-bottom: 1px solid #000;
}
.container h3 {
width: 100%;
height: 30px;
font-size: 18px;
text-align: center;
color: #41b1ff;
font-weight: normal;
line-height: 30px;
}
.row {
width: 100%;
height: auto;
background-color: rgba(192,192,192,0.50);
overflow: hidden;
}
.type {
width: 100%;
height: auto;
margin: 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid #fff;
}
.type:after {
content: "";
display: block;
clear: both;
}
.type li {
float: left;
width: 90px;
height: 45px;
margin: 0 auto;
background-color: #0078ff;
color: #fff;
font-size: 18px;
line-height: 45px;
text-align: center;
margin-bottom: 15px;
border-radius: 5px;
cursor: pointer;
transition: all 0.7s;
}
.type li:hover {
background-color: #fff;
color: #0078ff;
box-shadow: 0 0 10px rgba(0, 120, 255, 0.77);
}
.type .typeactive {
background-color: #fff;
color: #0078ff;
box-shadow: 0 0 10px rgba(0, 120, 255, 0.77);
}
.type li:nth-child(odd) {
margin-left: 25px;
}
.type li:nth-child(even) {
margin-left: 20px;
}
.style {
width: 100%;
height: 40px;
}
.style li {
float: left;
width: 90px;
height: 45px;
background-color: #FFBC00;
color: #fff;
font-size: 18px;
line-height: 45px;
text-align: center;
border-radius: 5px;
cursor: pointer;
transition: all 0.7s;
}
.style li:hover {
color: #ffa800;
background-color: #fff;
box-shadow: 0 0 10px rgba(255, 232, 95, 0.77);
}
.style .styleactive {
color: #ffa800;
background-color: #fff;
box-shadow: 0 0 10px rgba(255, 232, 95, 0.77);
}
.style li:nth-child(1) {
margin-left: 25px;
}
.style li:nth-child(2) {
margin-left: 20px;
}
.poly {
position: relative;
}
.bian {
position: absolute;
left: 100px;
top: 0;
width: 90px;
height: auto;
border-radius: 5px;
background-color: #EC494E;
overflow: hidden;
overflow: hidden;
transform: scale(1.2);
display: none;
}
.bian span {
display: block;
float: left;
width: 40px;
height: 45px;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.7s;
}
.bian input {
float: left;
width: 45px;
height: 35px;
margin-top: 5px;
border: 1px solid #fff;
box-sizing: border-box;
text-align: center;
line-height: 40px;
font-size: 18px;
color: #fff;
background: #EC494E;
border-radius: 3px;
box-shadow: 0 0 0 4px #fff inset;
transition: all 0.7s;
}
.cut,.create,.back {
float: left;
width: 90px;
height: 45px;
margin-left: 25px;
margin-bottom: 15px;
background-color: #5bd219;
color: #fff;
font-size: 18px;
line-height: 45px;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
.copy,.clear,.save {
float: left;
width: 90px;
height: 45px;
margin-left: 20px;
margin-bottom: 15px;
background-color: #5bd219;
color: #fff;
font-size: 18px;
line-height: 45px;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
.shezhi {
transition: all 0.7s;
}
.shezhistyle {
background: #fff;
color: #5bd219;
}
.create {
position: relative;
}
.xinjian {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 165px;
border-radius: 5px;
background-color: #EC494E;
box-shadow: 0 0 15px rgba(236, 73, 78, 0.76);
cursor: default;
display: none;
}
.xinjian:hover {
color: #fff;
}
.xinjian_before {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
color: #fff;
line-height: 16px;
text-indent: -1px;
font-size: 30px;
border: 1px solid #fff;
transform: rotate(45deg);
border-radius: 50%;
cursor: pointer;
}
.xinjian h6 {
width: 100%;
height: 50px;
color: #fff;
line-height: 50px;
text-align: center;
font-size: 20px;
font-weight: normal;
}
#ding {
width: 60px;
height: 30px;
font-size: 14px;
border-radius: 3px;
color: #fff;
background-color: #0078ff;
border: 0;
outline: none;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 120, 255, 0.5);
}
.xinjian_width,.xinjian_height {
float: left;
width: 85px;
height: 40px;
margin-left: 10px;
border-radius: 5px;
margin-bottom: 20px;
background-color: #FFBC00;
}
.xinjian_width:hover,.xinjian_height:hover {
background-color: #fff;
color: #000;
}
.xinjian_width span,.xinjian_height span {
float: left;
width: 30px;
height: 100%;
font-size: 16px;
text-align: center;
line-height: 40px;
}
.xinjian_width input,.xinjian_height input {
float: left;
margin-top: 5px;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
border: 1px solid #FFBC00;
box-sizing: border-box;
}
.box {
float: left;
width: 90px;
height: auto;
background-color: #EC494E;
overflow: hidden;
border-radius: 5px;
transition: all 0.7s;
}
.box {
margin-left: 25px;
}
.linewidth {
margin-left: 20px;
}
.box:hover {
background-color: #fff;
}
.box span {
display: block;
float: left;
width: 40px;
height: 45px;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.3s;
}
.box input {
float: left;
width: 45px;
height: 35px;
margin-top: 5px;
border: 1px solid #fff;
box-sizing: border-box;
text-align: center;
line-height: 40px;
font-size: 18px;
color: #fff;
background: #EC494E;
border-radius: 3px;
box-shadow: 0 0 0 4px #fff inset;
transition: all 0.3s;
}
.box2 span {
width: 55px;
}
.box2 input {
width: 140px;
}
.space {
float: left;
width: 100%;
height: 0;
border-bottom: 1px solid #fff;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>画板</h1>
<div class="container">
<div class="row">
<ul name="" class="type">
<li class="line typeactive" data="line">直 线</li>
<li class="rect" data="rect">矩 形</li>
<li class="circle" data="circle">圆 圈</li>
<li class="pen" data="pen">铅 笔</li>
<li class="poly" data="poly">多 边 形
<div class="bian">
<span>边数</span><input type="number" name="number" min="3" value="3" max="15">
</div>
</li>
<li class="eraser" data="eraser">橡 皮</li>
</ul>
<ul class="style">
<li class="stroke styleactive">描 边</li>
<li class="fill" style="display: none;">填 充</li>
</ul>
<div class="space"></div>
<div class="box">
<span>颜色</span><input type="color" name="color" value="#000000">
</div>
<div class="box linewidth">
<span>线宽</span><input type="number" name="number" value="1" max="150" min="1">
</div>
<div class="space"></div>
<div class="create shezhi">
新 建
<div class="xinjian">
<h6>画 板 尺 寸</h6>
<div class="xinjian_width">
<span>宽</span>
<input type="number" max="1241" min="500" value="500">
</div>
<div class="xinjian_height">
<span>高</span>
<input type="number" max="683" min="300" value="300">
</div>
<input type="button" name="queding" value="确定" id="ding">
<div class="xinjian_before">
+
</div>
</div>
</div>
<div class="clear shezhi">
清 空
</div>
<div class="back shezhi">
撤 销
</div>
<div class="save shezhi">
保 存
</div>
<div class="cut shezhi" data="cut">
剪 切
&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0