利用canvas开发一个绘图板

【底部附有制作绘图板完整代码】
编码过程中会遇到一些原生js的技术，小编会先罗列出来。

1、在for循环中为多个元素利用索引值绑定事件，会产生异步问题。

问题所在：在事件代码内部可以进行各种操作，就是不能引用循环变量。

两种解决方案解决方案：

1. 利用一个自执行函数包裹住循环体，并将循环变量作为参数传递进去。

//为每一个颜色设置单击事件，并让所有的颜色具备.currentColor类
//自执行函数：语法(function(形参){})(实参)；
//不一定非要拿小括号包裹起来，也可以在函数前面加单目运算，如：+、-、！、~等都可以

for(var i=0; i<$$('.color').length; i++){
	~function(index){
		$$('.color')[index].addEventListener('click',function(event){
			for(var j=0; j<$$('.color').length; j++){
				$$('.color')[j].classList.remove('currentColor');
			}
			$$('.color')[index].classList.add('currentColor')
		})
	}(i)
}

2. 利用let定义循环变量i，这样在每一次循环中循环变量i都是一个独立的变量。
   

2、如何利用Jaavascript模拟元素的拖拽

let isDown = false;
let ctx = canvas.getContext('2d');
canvas.addEventListener('mousedown',function(event){
	isDown = true;
})
canvas.addEventListener('mouseup',function(){
	isDown = false;
})
canvas.addEventListener('mousemove',function(event){
	if(isDown){
		//鼠标按下的同时进行了移动：绘制图形
	}else{
		//鼠标弹起的同时进行了移动：没有操作
	}
})

3、ctx.beginPath()；

每次绘制一个新图形，都要先执行这个方法。告诉画布下面的操作是一个新图形的绘制工作，和现在画布上已有的图形无关。

4、将Canvas画布转换为图片

1. 利用blob地址将画布转换为图片。

canvas.toBlob(function(blob){
	console.log(blob)	//blob - Canvas画布转换的File对象
},MIME类型,quality)
//参数：quality - 转换为图片的最终质量，取值为0-1。

2. 利用base64地址将画布转换为图片。

var base64URL=canvas.toDataURL(MIME类型,quality)

绘图板完整代码：

<div class="controlPanel">
	<div>
		画笔粗细：
		<select class="ctxWidth">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		</select>
	</div>
	<div class="ctxColor">画笔颜色：</div>
	<div><button class="clearCanvas">清除画布</button></div>
	<div><button class="saveImage">保存图片</button></div>
</div>
<canvas class="myCanvas"></canvas>

.controlPanel{
	width: 1000px;
	height: 60px;
	margin: 20px auto;
	border: 1px solid #3385ff;
	box-sizing: border-box;
	padding: 16px;
	display: flex;
	align-items: center;
}
.ctxWidth{
	width: 50px;
}
.ctxColor{
	margin: auto 40px;
	display: flex;
}
.ctxColor .color{
	width: 20px;
	height: 20px;
	margin: 0 3px;
	border: 2px solid transparent;
}
.ctxColor .currentColor{
	border: 2px solid rgba(0,0,0,0.6);
}
button{
	margin-left: 20px;
}
.myCanvas{
	border: 1px solid #3385ff;
	display: block;
	margin: auto;
}

//封装利用选择器来进行DOM对象的获取
function $(selector){
	return document.querySelector(selector);
}

function $$(selectors){
	return document.querySelectorAll(selectors);
}

let canvas = $(".myCanvas");
canvas.width = 1000;
canvas.height = 500;

let ctx = canvas.getContext('2d');

//canvas画布默认生成的图片是png格式，
//绘制一个白色矩形占满整个画布
ctx.beginPath();
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle = '#ffffff';
ctx.fill(); 

let colorList = ['#363636','#e1565b','#3385ff','#d8ad7a','#14d8a2','#cc14d8'];
for(var i=0;i<colorList.length;i++){
	var colorNode = document.createElement('div');
	colorNode.className = 'color';
	colorNode.style.backgroundColor = colorList[i];		//设置画笔的颜色
	$(".ctxColor").appendChild(colorNode);
}

//为每一个颜色设置单击事件，并让所有的颜色具备.currentColor类
for(let i=0; i<$$('.color').length; i++){
	$$('.color')[i].addEventListener('click',function(event){
		for(var j=0; j<$$('.color').length; j++){
			$$('.color')[j].classList.remove('currentColor');
		}
		$$('.color')[i].classList.add('currentColor');
		ctx.strokeStyle = colorList[i];
	})
}

//利用avaScript模拟元素的拖拽
let isDown = false;
canvas.addEventListener('mousedown',function(event){
	isDown = true;
	ctx.beginPath();
	ctx.moveTo(event.offsetX,event.ofsetY)
})
canvas.addEventListener('mouseup',function(){
	isDown = false;
})
canvas.addEventListener('mousemove',function(event){
	if(isDown){		//鼠标按下的同时进行了移动：绘制图形
		ctx.lineTo(event.offsetX,event.offsetY);

		ctx.stroke();
	}else{		//鼠标弹起的同时进行了移动：没有操作
		
	}
})

//设置画笔的粗细
$('.ctxWidth').addEventListener('change',function(){
	ctx.lineWidth = this.value;
})

//清除画布
$('.clearCanvas').addEventListener('click',function(){
	ctx.clearRect(0,0,canvas.width,canvas.height)
})

//保存图片
//注意：要将canvas转换为jpg格式的图片，需要在画布上覆盖一个白色的矩形。
$('.saveImage').addEventListener('click',function(){
	//方法一：利用blob地址将画布转换为图片
	// canvas.toBlob(function(blob){
	// 	let url = window.URL.createObjectURL(blob);
	// 	let aNode = document.createElement('a');
	// 	aNode.href = url;
	// 	aNode.download = '';
	// 	aNode.click();
	// },"image/jpeg",1);

	//方法二：利用base64地址将画布转换为图片。
	let base64Url = canvas.toDataURL("image/jpeg",1);
	let aNode = document.createElement('a');
	aNode.href = base64Url;
	aNode.download = '';
	aNode.click();
})