canvas实现画板功能 |
您所在的位置：网站首页 › zbrush颜色橡皮擦 › canvas实现画板功能 |
canvas实现画板功能
|
最近在看canvas画板的部分，正好看到一个案例是关于canvas画板的，在此做下记录。 此案例是采用面向对象的编程思想，具体表现形式就是：js部分是一个对象，对象里面是一些变量和方法。 html部分代码如下： canvas画板部分，需要指定画板的宽高。 ul部分是按钮集合。 input组件中当type为color时，是一个颜色选择器，可以进行颜色的选取，可以通过监听change事件来获取选择的颜色值。 input组件中当type为range时，是一个进度条选择器，可以进行设置线条的粗细，min和max可以设置粗细的选择范围，同样的，也是通过监听change事件来获取设定的数值。 最最重要的就是js部分的代码： var drawingBoard = { cavs:document.getElementById('cavs'),//获取canvas画板 ctx:document.getElementById('cavs').getContext('2d'), btn_container:document.getElementsByTagName('ul')[0], bool:false,//鼠标按下移动时绘画，鼠标不按下时移动不绘画，需要有个判断条件 colorBtn:document.getElementById('colorChange'), lineRuler:document.getElementById('lineRuler'), imgsArr:[], init:function(){ this.ctx.lineCap = 'round';//圆帽 this.ctx.lineJoin = 'round';//转弯为圆弧 this.drawing(); this.btnsAllFn(); }, drawing:function(){ var self = this, cavs = this.cavs, c_left = cavs.offsetLeft, c_top = cavs.offsetTop; console.log(c_left,c_top); //鼠标按下是个动作，鼠标移动是个过程，会一直监听鼠标事件 this.cavs.onmousedown = function(e){ self.bool = true;//鼠标按下的时候加个判断 var c_x = e.pageX - c_left,// c_y = e.pageY - c_top; self.ctx.beginPath();//开始绘制 self.ctx.moveTo(c_x,c_y);//移动到某个位置 //getImageData:复制画布上指定矩形的像素数据，然后保存到本地的一个数组中，用于撤销操作。 var img = self.ctx.getImageData(0,0,self.cavs.offsetWidth,self.cavs.offsetHeight); self.imgsArr.push(img); } this.cavs.onmousemove = function(e){ if(self.bool){ self.ctx.lineTo(e.pageX - c_x,e.pageY - c_y); self.ctx.stroke(); } } //鼠标抬起时，结束画板的绘制 this.cavs.onmouseup = function(e){ self.ctx.closePath();//结束画板绘制 self.bool = false; } //鼠标移出画板时，结束画板的绘制 this.cavs.onmouseleave = function(e){ self.ctx.closePath(); self.bool = false; } }, btnsAllFn:function(){ var self = this; this.btn_container.onclick = function(e){ switch(e.target.id){ case 'cleanBoard': //清屏 self.ctx.clearRect(0,0,self.cavs.offsetWidth,self.cavs.offsetHeight); break; case 'eraser': //橡皮 self.ctx.strokeStyle = '#ffffff'; break; case 'rescind': //撤销 if(self.imgsArr.length>0){ self.ctx.putImageData(self.imgsArr.pop(),0,0); } break; } } this.colorBtn.onchage = function(){//监听颜色选择器的变化 console.log(this.value);//注意js事件中的this指的是dom元素本身 self.ctx.strokeStyle = this.value; } this.lineRuler.onchange = function(){//监听线条粗细的变化 console.log(this.value);//注意js事件中的this指的是dom元素本身 self.ctx.lineWidth = this.value; } } } drawingBoard.init();
|
【本文地址】