画板

朴灿烈づ我的快乐病毒、 2022-05-10 11:00 216阅读 0赞

简述画板：  
首先设置一些属性：画板，画笔，创建数组imgArr放ImageData 对象  
添加一些方法：draw，绑定mousedown，mousemove，mouseup，mouseleave，当画笔开始画的时候，获取当前位置，将x，y值传给move，mousemove，获取位置，lineTo（x,y），stroke(),mouseup,在画板上结束绘画，关闭路径，mouseleave,在画板外结束绘画，关闭路径，绘画结束，使用getimagedata获取画板各个位置的rhba值的data，添加在imgArr中，  
事件：  
撤销，将imgArr的最后一位pop出数组，使用putImgeData,将数据添加到画板上  
橡皮擦，将画板的颜色变为白色  
清屏，触发clearRect方法，  
修改颜色，input方法的type为color，获取当前的$(this).val()设置画笔颜色  
改变样式粗细，input方法的type为lineRuler，渲染出一个进度条

获取进度条的值，修改画笔的粗细

//js /** * drawing broad nan.xue * canvas * api * */ var lineObj = { cavs: $('.cavs'), context: $('.cavs').get(0).getContext('2d'), colorChange: $('#colorChange'), cleanBoard: $('#colorChange'), eraser: $('#eraser'), //橡皮 rescind: $('#rescind'), //撤销 lineRuler: $('#lineRuler'), //线条 imgArr:[], bool: false, init: function () { // console.log(this.context) this.context.lineCap ='round';//线条起始和结尾样式 this.context.lineJoin ='round';//转弯 this.draw(); this.clickBtn(); }, draw: function () { var self = this, cavs = this.cavs; var c_x = cavs.offset().left; //画板的左边 var c_y = cavs.offset().top; //滑板的上面 cavs.mousedown(function (e) { self.bool = true var m_x = e.pageX - c_x; //计算获得画笔当前的位置， var m_y = e.pageY - c_y; self.context.beginPath(); self.context.moveTo(m_x, m_y); console.log(m_x,m_y) // cavs.css('cursor', 'pointer'); cavs.mousemove(function (e) { if (self.bool) { self.context.lineTo(e.pageX - c_x, e.pageY - c_x); self.context.stroke(); } }); cavs.mouseup(function () { self.context.closePath(); self.bool = false console.log(0) // cavs.css('cursor', 'none'); }); cavs.mouseleave(function () { self.bool = false self.context.closePath(); console.log(1) // cavs.css('cursor', 'none')如果用事件绑定的话 要记得用移除事件 }); var imgData = self.context.getImageData(0,0,self.cavs[0].width,self.cavs[0].height); self.imgArr.push(imgData); console.log(self.imgArr); }); }, clickBtn:function(){ var self = this; $('.btn-list').on('click',function(e){ e = e||window.event; switch(e.target.id){ case 'cleanBoard': self.context.clearRect(0,0,self.cavs[0].width,self.cavs[0].height); break case 'eraser': self.context.strokeStyle = '#FFF'; break case 'rescind': if(self.imgArr.length > 0){ self.context.putImageData(self.imgArr.pop(),0,0) } break } }) this.colorChange.change(function(event) { //当颜色改变时触发 self.context.strokeStyle = $(this).val();//改变画笔颜色 }); this.lineRuler.change(function(event) { self.context.lineWidth = $(this).val(); }); } } lineObj.init(); //html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drawing board</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <div class="wrapper"> <canvas class="cavs" width="700" height="335"> </canvas> <ul class="btn-list"> <li><input type="color" id='colorChange'></li> <li><input type="button" id='cleanBoard' value="清屏"></li> <li><input type="button" id='eraser' value="橡皮"></li> <li><input type="button" id='rescind' value="撤销"></li> <li><input type="range" id='lineRuler' value="线条" min="1" max="20"></li> </ul> </div> <script src="js/jquery.min.js"></script> <script src="js/index.js"></script> </body> </html> //css *{ padding: 0; margin: 0; list-style: none; } body{ background: url(../img/xhr.jpg) 0 0 no-repeat; background-attachment: fixed; background-size: cover; } .wrapper{ width:700px ; height: 360px; } .wrapper canvas{ border:1px solid royalblue; border-radius: 25px; box-shadow: 10px 10px 5px #888888; margin: 10px 0 0 10px; } .wrapper .btn-list{ width: 100%; text-align: center; border-radius: 25px; margin-top: 10px; } .wrapper .btn-list li{ display: inline-block;; margin-left: 35px; } .wrapper .btn-list li input{ background-color:yellow; color: black; border: none; padding: 6px 15px; font-size: 16px; cursor: pointer; border-radius: 25px; transition-duration:0.2s; } .wrapper .btn-list li input#lineRuler{ /* margin-top: 10px; */ } .wrapper .btn-list li input:hover{ border:1px solid rebeccapurple; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24); }