js实现一个canvas画板效果代码-html代码-BFW代码库

js实现一个canvas画板效果代码

代码语言：html

代码描述：js实现一个canvas画板效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
    background: #A5A5A5;
    font: 16px/1.5 "Avenir", "Arial", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", "\5b8b\4f53", "sans-serif";
}

@font-face {
    font-family: "iconfont";
    src: url("https://at.alicdn.com/t/font_1458104486_2104871.eot");
    src: url("https://at.alicdn.com/t/font_1458104486_2104871.eot?#iefix") format("embedded-opentype"),
         url("https://at.alicdn.com/t/font_1458104486_2104871.woff") format("woff"),
         url("https://at.alicdn.com/t/font_1458104486_2104871.ttf") format("truetype"),
         url("https://at.alicdn.com/t/font_1458104486_2104871.svg#iconfont") format("svg");
}

.textarea {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9999;
    padding: 5px;
    width: 200px;
    height: 80px;
    background: transparent;
    border: 1px solid #404040;
    outline: none;
    font: inherit;
    color: #f4f4f4;
    resize: none;
}

.paint {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -254px 0 0 -354px;
    width: 700px;
    height: 500px;
    background: #282828;
    border: 4px solid #8A8A8A;
}

.importImage {
    display: none;
}

.paint-area {
	float: left;
    position: relative;
}
.paint-show {}
.paint-draw {
	position: absolute;
	right: 0;
	top: 0;
}

.paint-tools {
	float: left;
	position: relative;
    width: 48px;
    height: 100%;
    background: #535353;
    border-right: 2px solid #8a8a8a;
}
.paint-tools-item {
    display: block;
    position: relative;
    margin: 7px auto 0;
    width: 28px;
    height: 28px;
	border: 1px solid transparent;
	font: 20px/28px "iconfont";
	text-align: center;
	color: #DCDCDC;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    text-stroke-width: 0.2px;
}
.paint-tools-item:hover,
.p.........完整代码请登录后点击上方下载按钮下载查看