通过canvas实现一个简易的电子画板

通过canvas可以进行画图实现一些动画效果等，今天练习下通过canvas来实现一个简易的电子画板，可以在白板上进行画画，然后指定不同的颜色、线条粗细，加载不同的背景以及擦除效果。

功能划分

线条涂抹

可以擦除指定区域画布

清除画布

可以保存到图片下载

可以指定不同的颜色的线条

可以指定线条的宽度

canvas功能点

根据以上操作，实际上用到的函数比较少，主要是:

clearRect清除某位置区域的画布

drawImage加载图片到画布中

lineTo划线

基本上就用到了这么几个，因为功能比较简单，所以用到的函数比较少。

大体思路

思路的话，其实就是初始化canvas元素，由于需要加载背景图层，所以设置两个canvas元素，底层用来加载背景，上层用来绘画。用到的事件的话就是onmousedownonmousemoveonmouseup三个事件，初始化的时候监听下这几个事件即可。然后根据event中的坐标，来绘制线条以及清除画布。

代码实现

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title画板/titlestylehtml,body{margin:0px;padding:0px;height:100%;width:100%;overflow:hidden;}canvas{height:100%;width:100%;position:absolute;left:0px;top:0px;z-index:100;background-color:transparent;}49e;z-index:10;}.toolspan{display:inline-block;position:absolute;width:100px;height:30px;border:1pxsolidf2f2f2;cursor:pointer;}.draw{left:10px;top:10px;}.clear{left:150px;top:10px;}.empty{left:300px;top:10px;}.tianzige{left:450px;top:10px;}.hengxian{left:600px;top:10px;}.screen{left:750px;top:10px;}.tool{position:absolute;left:0px;top:0px;z-index:99999;}.color{position:absolute;right:0px;top:0px;width:110px;z-index:9999;height:100px;}.colorspan{display:inline-block;height:20px;margin:2px;width:50px;line-height:20px;text-align:center;float:left;cursor:pointer;font-size:12px;}.c1{background-color:red;color:white;}.c2{background-color:yellow;color:333;color:white;}.c4{background-color:green;color:white;}.c5{background-color:white;color:f2f2f2;}.linewidth{position:absolute;top:80px;right:0px;width:110px;height:100px;z-index:09999;}.linewidthspan{width:100%;display:inline-block;margin-bottom:5px;cursor:pointer;background-color:white;}.line1{height:5px;}.line2{height:10px;}.line3{height:20px;}/style/headbodydivclass="tool"spanclass="draw"onclick="draw()"画笔/spanspanclass="clear"onclick="xiangpi()"橡皮/spanspanclass="empty"onclick="empty()"清除/spanspanclass="tianzige"onclick="tianzige()"田字格/spanspanclass="hengxian"onclick="hengxian()"横线/spanspanclass="screen"onclick="screena()"截屏/span/divdivclass="color"spanclass="c1"onclick="changeColor('red')"红/spanspanclass="c2"onclick="changeColor('yellow')"黄/spanspanclass="c3"onclick="changeColor('#333')"黑/spanspanclass="c4"onclick="changeColor('green')"绿/spanspanclass="c5"onclick="changeColor('white')"白/spanspanclass="c6"onclick="changeColor('purple')"紫/span/divdivclass="linewidth"spanclass="line1"onclick="changeWidth(5)"/spanspanclass="line2"onclick="changeWidth(10)"/spanspanclass="line3"onclick="changeWidth(20)"/span/div/body/html

以上是html以及css样式，主要是针对一些按钮、设置、样式进行处理。大体效果如下：

效果图

然后针对canvas进行初始化以及事件绑定处理:

//改变全局状态的颜色functionchangeColor(c){color=c;}//切换绘画/清除状态functiondraw(){('abc');status='draw';}//切换绘画/清除状态functionxiangpi(){('aaa');status='clear';}//改变线条宽度functionchangeWidth(w){lineWidth=w;}//加载背景图片functiontianzige(){().drawImage('');}functionhengxian(){().drawImage('');}//清空画布functionempty(){varins=();(0,0,,);}//保存图片functionscreena(){//设置保存图片的类型vartype='jpg';varimgdata=().(type);//将mime-type改为image/octet-stream,强制让浏览器下载varfixtype=function(type){type=().replace(/jpg/i,'jpeg');varr=(/png|jpeg|bmp|gif/)[0];return'image/'+r;}imgdata=(fixtype(type),'image/octet-stream')//将图片保存到本地varsaveFile=function(data,filename){varlink=('a');=data;=filename;varevent=('MouseEvents');('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);(event);}varfilename=newDate().toLocaleDateString()+'.'+type;saveFile(imgdata,filename);}

以上就已经通过canvas实现了一个简易的电子画板小工具，当然，目前仅仅是个Demo，用到生产是绝对不行滴。

很赞哦!（161）