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;
co.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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