Canvas签字画图板
需求:
需要开发一个移动端的手写板,要求是类似于签字版,于是就想到了使用canvas着手做一个满足业务需求。
注: 本次实现的canvas签字版主要用于手机端网页,若用于PC端网页请自行对事件函数以及相应代码做对应的修改。
效果图:
实现代码:
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
overflow-y: auto;
}
#app {
width: 100vw;
height: 100vh;
background-color: #ffffff;
}
/* 白板style */
div.bb-center {
width: 100vw;
height: 100vh;
top: 0;
bottom: 0;
position: fixed;
background-color: rgba(0, 0, 0, 0.2);
z-index: 10;
font-size: 0.3rem;
visibility: hidden;
}
/* 显示画板 */
div.bb-center.active {
visibility: visible;
}
.bbc-top {
box-sizing: border-box;
height: 0.8rem;
padding: 0.1rem 0.24rem;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.bbc-top>div {
padding: 0.1rem 0.3rem;
font-size: 0.