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

代码语言：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: relative;
	margin: 2px;
	width: 24px;
	height: 24px;
	background: #747474;
	border: 1px solid transparent;
	cursor: pointer;
}
.dialog-item:hover,
.dialog-item-active {
	border-color: #919191;
}

.streak-list .dialog-item:before {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -1px 0 0 -9px;
	width: 18px;
	height: 2px;
	overflow: hidden;
	background: #3A3A3A;
	content: ' ';
}
.streak-list .dialog-item:nth-child(1):before {
	height: 1px;
}
.streak-list .dialog-item:nth-child(2):before {
	height: 2px;
}
.streak-list .dialog-item:nth-child(3):before {
	margin-top: -1px;
	height: 3px;
}
.streak-list .dialog-item:nth-child(4):before {
	margin-top: -2px;
	height: 4px;
}
.streak-list .dialog-item:nth-child(5):before {
	margin-top: -2px;
	height: 5px;
}
.streak-list .dialog-item:nth-child(6):before {
	margin-top: -3px;
	height: 6px;
}
</style>

</head>

<body >
  <div class="paint" id="paint">
    <div class="paint-tools">
        <!-- 线条 -->
        <i class="paint-tools-item paint-tools-pencil paint-tools-active" title="画笔" data-action="pencil"></i>
        <!-- 文字 -->
        <i class="paint-tools-item paint-tools-text" title="文字" data-action="text"></i>
        <!-- 空心矩形 -->
        <i class="paint-tools-item paint-tools-strokeRect" title="空心矩形" data-action="strokeRect"></i>
        <!-- 实心矩形 -->
        <i class="paint-tools-item paint-tools-fillRect" title="实心矩形" data-action="fillRect"></i>
        <!-- 空心圆 -->
        <i class="paint-tools-item paint-tools-strokeArc" title="空心圆" data-action="strokeArc"></i>
        <!-- 实心圆 -->
        <i class="paint-tools-item paint-tools-fillArc" title="实心圆" data-action="fillArc"></i>
        <!-- 图片绘制 -->
        <!-- <i class="paint-tools-item paint-tools-image" title="图片" data-action="image"></i> -->
        <!-- 调色板 -->
        <i class="paint-tools-item paint-tools-palette" title="调色板" data-action="palette"></i>
        <!-- 线条粗细 -->
        <i class="paint-tools-item paint-tools-streak" title="线条粗细" data-action="streak"></i>
        <!-- 橡皮擦 -->
        <i class="paint-tools-item paint-tools-rubber" title="橡皮擦" data-action="rubber"></i>
        <!-- 清空画图板 -->
        <i class="paint-tools-item paint-tools-empty" title="清空画图板" data-action="empty"></i>
        <!-- 存为图像 -->
        <!-- <i class="paint-tools-item paint-tools-save" title="存为图像" data-action="save"></i> -->
        <!-- 下载图像 -->
        <i class="paint-tools-item paint-tools-download" title="下载图像" data-action="download"></i>

        <!-- 线条容器 -->
        <div class="dialog streak-list"></div>

        <!-- 颜色容器 -->
        <div class="dialog palette-list"></div>
    </div>
    <div class="paint-area">
        <canvas width="650" height="500" class="paint-show"></canvas>
        <canvas width="650" height="500" cl.........完整代码请登录后点击上方下载按钮下载查看