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