利用canvas开发一个绘图板

拼搏现实的明天。 2022-12-09 04:53 195阅读 0赞

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

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

问题所在：在事件代码内部可以进行各种操作，就是不能引用循环变量。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70_pic_center]

两种解决方案解决方案：

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)
    }

1.  利用let定义循环变量i，这样在每一次循环中循环变量i都是一个独立的变量。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70_pic_center 1]

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

#### 3、ctx.beginPath()； ####

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

#### 4、将Canvas画布转换为图片 ####

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

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

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

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

## 绘图板完整代码： ##

.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();
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c7bd1d24f25a4e3e8e4610462cb9143f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/7b84deaa3abf4a9f864f42e490463fb5.png