【底部附有制作绘图板完整代码】
编码过程中会遇到一些原生js的技术,小编会先罗列出来。
1、在for循环中为多个元素利用索引值绑定事件,会产生异步问题。
问题所在:在事件代码内部可以进行各种操作,就是不能引用循环变量。
两种解决方案解决方案:
- 利用一个自执行函数包裹住循环体,并将循环变量作为参数传递进去。
//为每一个颜色设置单击事件,并让所有的颜色具备.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)
}
- 利用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画布转换为图片
- 利用blob地址将画布转换为图片。
canvas.toBlob(function(blob){
console.log(blob) //blob - Canvas画布转换的File对象
},MIME类型,quality)
//参数:quality - 转换为图片的最终质量,取值为0-1。
- 利用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();
})