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,
.paint-tools-active {
    background: #747474;
    border-color: #919191;
}
.paint-tools-pencil:before {
        font-size: 18px;
        content: "\e608";
}
.paint-tools-strokeRect:before {
        font-size: 26px;
        content: "\e607";
}
.paint-tools-fillRect:before {
        display: block;
        margin-top: -1px;
        content: "\e605";
}
.paint-tools-strokeArc:before {
        font-size: 22px;
        content: "\e606";
}
.paint-tools-fillArc:before {
        display: block;
        margin-top: -2px;
        font-size: 18px;
        content: "\e604";
}
.paint-tools-image:before {
        display: block;
        margin-top: -1px;
        content: "\e603";
}
.paint-tools-palette:before {
        display: block;
        margin-top: -2px;
        font-size: 25px;
        content: "\e600";
}
.paint-tools-streak:before {
        font-size: 26px;
        content: "\e609";
}
.paint-tools-rubber:before {
        content: "\e602";
}
.paint-tools-empty:before {
        content: "\e601";
}
.paint-tools-text:before {
        content: "\e60a";
}
.paint-tools-save:before {
        content: "\e60c";
}
.paint-tools-download:before {
    display: block;
    margin-top: -2px;
    font-size: 24px;
        content: "\e60b";
}

.dialog {
        display: none;
        position: absolute;
        left: 100%;
        top: 10px;
        z-index: 90;
        margin-left: -8px;
        padding: 3px;
        width: 92px;
        background: #606060;
        border: 1px solid #3A3A3A;
}
.dialog-item {
        float: left;
        position: rel.........完整代码请登录后点击上方下载按钮下载查看