利用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{
   
   
		//鼠标弹起的同时进行了移动：没有操作
	}
})
</