利用canvas开发一个绘图板

【底部附有制作绘图板完整代码】
编码过程中会遇到一些原生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();
})

利用canvas开发一个绘图板相关推荐

html5 自动扣图,利用canvas实现一个抠图小工具
本文作者:IMWeb 孙世吉未经同意,禁止转载利用canvas实现一个抠图小工具 0 前言作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我 ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
利用java开发一个猜数字幸运小游戏：游戏规则如下
package com.day04.www;import java.util.Random; import java.util.Scanner;public class day04 {public s ...
利用MyEclipse开发一个调用webservice接口的程序
上一篇文章我们已经学习了如何使用Java 工具MyEclipse开发一个webservice接口,那么接口开发好了如何调用?接下来我们就来解决这个问题. 1:首先随便创建一个Java project选 ...
java 双击_利用java开发一个双击执行的小程序
之前我们利用java写了很多东西,但是好像都没有什么实际意义. 因为有意义桌面小程序怎么都得有个界面,可是界面又不太好搞.或者了解到这一层的人就少之又少了. 呀,是不是还得开辟一些版面来介绍awt和 ...
利用c#开发一个telnet unix服务器或者防火墙的小工具(转)
因为工作原因,需要定期从AIX服务器和cisco防火墙统计一些信息,于是决定自己写个小程序利用telnet协议实现这个功能. 利用SOCKET建立与服务器之间的连接,之后我们就可以利用程序直接发送命令 ...
微信小程序利用canvas绘制一个动画百分比圆圈
效果图(动态的圆圈) <template> <view class='circleBar'><view class="wrap"><vie ...
微信小程序利用canvas绘制一个静态百分比圆圈
效果如图 <view class='circleBar'><view class="wrap"><canvas class="cir&quo ...
熬了三个大夜利用Python开发一个炸金花小游戏，注意别玩上瘾了~~（附完整源码）
大家好,我是你们的好朋友王老师~ 众所周知扑克牌可谓是居家旅行.桌面交友的必备道具,今天我们用 Python 来实现一个类似炸金花的扑克牌小游戏,先来看一下基本的游戏规则. 炸(诈)金花又叫三张牌, ...

利用canvas开发一个绘图板

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

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

3、ctx.beginPath()；

4、将Canvas画布转换为图片

绘图板完整代码：

利用canvas开发一个绘图板相关推荐

最新文章

热门文章