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" class="paint-draw"></canvas>
    </div>
    <input type="file" class="importImage">
</div>


  
      <script >
var oPaint = $('#paint'),
    oImportImage = $('.importImage', oPaint)[0],
    aPaintToolsItem = $('.paint-tools-item', oPaint),
    iPaintToolsLength = aPaintToolsItem.length,
	oStreakList = $('.streak-list', oPaint)[0],
	oPaletteList = $('.palette-list', oPaint)[0],
    oPaintArea = $('.paint-area', oPaint)[0],
    oPaintDraw = $('.paint-draw', oPaintArea)[0],
    oPaintShow = $('.paint-show', oPaintArea)[0],
    oPaintDrawCxt = oPaintDraw.getContext('2d'),
    oPaintShowCxt = oPaintShow.getContext('2d'),
	lines = [1, 2, 3, 4, 5, 6],
	colors = ['#000', '#07a269', '#8b0ded', '#09f', '#ff8712', '#fff'],
	oCurTool = null,
    oTextarea = null,
	config = {
		action: 'pencil',
	    color: '#09f',
		line: 1,
    	width: oPaintDraw.width,
    	height: oPaintDraw.height,
		rubber: {
			width: 20,
			height: 20
		},
        image: {
            xAxis: 10,
            yAxis: 10,
            width: 100,
            heigth: 100
        }
	};

createLines();
createColors();
changeCursor(config.action);

// 给每个工具注册点击事件
for(var i = 0; i < iPaintToolsLength; i++) {

    aPaintToolsItem[i].index = i;
    aPaintToolsItem[i].onclick = function(ev) {
		var act = this.getAttribute('data-action'),
			top = this.offsetTop;
		
        if(act !== 'text') {
            removeTextarea();
        }
        removeClass(oCurTool, 'paint-tools-active');

		hide(oPaletteList);
		hide(oStreakList);
        
		if(act === 'empty') { // 清空绘图板
			clearPaint(oPaintDrawCxt);
			clearPaint(oPaintShowCxt);
            removeTextarea();
		}
		else if(act === 'text') { // 输入文字
			config.action = act;
			changeCursor(act);
	        togglePaintToolsState(this);
		}
        else if(act === 'download') { // 下载当前画布为图片
            downloadImage();
        }
		else if(act === 'palette') { // 颜色选择
			oCurTool = this;
			css(oPaletteList, 'top', top);
			addClass(oCurTool, 'paint-tools-active');
			show(oPaletteList);
			ev.stopPropagation();
		}
		else if(act === 'streak') { // 线条粗细
			oCurTool = this;
			css(oStreakList, 'top', top);
			addClass(oCurTool, 'paint-tools-active');
			show(oStreakList);
			ev.stopPropagation();
		}
		else { // 画 线，矩形，圆 等
			config.action = act;
			changeCursor(act);
	        togglePaintToolsState(this);
		}
    }
}

// 导入图片
oImportImage.onchange = function() {
    var file = this.files[0],
        reader = new FileReader();
    
    reader.readAsDataURL(file);
    
    reader.onload = function() {
        if(!/image/.test(file.type)) {
            alert('请选择图片类型的文件！');
            return;
        }
        
        var image = document.createElement('img');
        image.src = reader.result;
        image.width = config.image.width;
        image.height = config.image.height;
        oPaintShowCxt.drawImage(image, config.image.xAxis, config.image.yAxis);
        image = null;
    }
}

// 输入文本
oPaint.onkeyup = function(ev) {
    var oTarget = ev.target || event.srcElement;
    
    if(oTarget.tagName.toLowerCase() === 'textarea') {
        var key = ev.keyCode,
            text = '',
            left = parseInt(oTextarea.style.l.........完整代码请登录后点击上方下载按钮下载查看