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-s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0