canvas实现画板功能——选择颜色、线条粗细、橡皮擦、撤销等功能

素颜马尾好姑娘i 2023-01-23 06:50 9阅读 0赞

最近在看`canvas`画板的部分，正好看到一个案例是关于`canvas`画板的，在此做下记录。

此案例是采用面向对象的编程思想，具体表现形式就是：`js`部分是一个对象，对象里面是一些变量和方法。

`html`部分代码如下：  
`canvas`画板部分，需要指定画板的宽高。  
`ul`部分是按钮集合。  
`input`组件中当`type`为`color`时，是一个颜色选择器，可以进行颜色的选取，可以通过监听`change`事件来获取选择的颜色值。  
`input`组件中当`type`为`range`时，是一个进度条选择器，可以进行设置线条的粗细，`min`和`max`可以设置粗细的选择范围，同样的，也是通过监听`change`事件来获取设定的数值。

<div class="container">
        <canvas id="cavs" width="700" height="330"></canvas>
        <ul>
            <li><input type="color" id="colorChange" /></li>
            <li><input type="button" value="清屏" id="cleanBoard" /></li>
            <li><input type="button" value="橡皮" id="eraser" /></li>
            <li><input type="button" value="撤销" id="rescind" /></li>
            <li>
                <input type="range" value="线条粗细" id="lineRuler" min="1" max="20" />
            </li>
        </ul>
    </div>

最最重要的就是`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();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221004/84dc18bd21f44485a88ed8f3c0503919.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221004/9a6d11aecacf4a35a6374fdacfe1d4bd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas画布绘制线条样式：粗细，圆角，拐角等

线条的粗线 `lineWidth`是改变线条的粗线的，默认是一个像素： context.beginPath(); context.moveTo(20,

矫情吗；*/ 2024年03月26日 23:57/ 0 赞/ 83 阅读

相关 canvas实现刮奖功能

canvas刮奖原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个canvas用于显示涂层，可以用一张

素颜马尾好姑娘i/ 2024年02月20日 12:37/ 0 赞/ 42 阅读

相关 150行代码实现一个极简的Canvas多功能画板

目录 1.前言 2.多功能画板的实现 2.1 画板初始化 2.2 画笔 2.3 橡皮擦 2.4 清屏

小灰灰/ 2024年02月20日 04:03/ 0 赞/ 46 阅读

相关 canvas实现橡皮擦

抽奖的时候后见过，类似于刮刮乐。相关知识点： context.arc(x,y,r,sAngle,eAngle,counterclockwise);

太过爱你忘了你带给我的痛/ 2023年07月12日 03:56/ 0 赞/ 8 阅读

相关 canvas实现画板功能——选择颜色、线条粗细、橡皮擦、撤销等功能

最近在看`canvas`画板的部分，正好看到一个案例是关于`canvas`画板的，在此做下记录。此案例是采用面向对象的编程思想，具体表现形式就是：`js`部分是一个对象，对

素颜马尾好姑娘i/ 2023年01月23日 06:50/ 0 赞/ 10 阅读

相关 canvas 实现画板（二）（添加画矩阵功能）(2021/5/11)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

淡淡的烟草味﹌/ 2023年01月20日 08:14/ 0 赞/ 166 阅读

相关 Android studio实现画板功能

简单概述在日常生活中，我们经常会突发一些奇思妙想，或是一个画面，或是几个符号。这时候无法使用拍照或者打字功能实现，想拿笔记下又身边找不到笔。于是我琢磨能不能做一个手机端

淩亂°似流年/ 2023年01月01日 15:57/ 0 赞/ 260 阅读

相关 canvas画板

文章目录（1）指定填充的颜色（2）指定透明度（3）透明度(Transparent)

叁歲伎倆/ 2022年11月16日 05:58/ 0 赞/ 156 阅读

相关 office撤销功能失效

亲测2010适用撤销按钮一直是灰色。编辑的时候闪一下，又变为灰色。按Ctrl-Z也同样不管用。中文资源里面的解决方法都是用winword.exe /safe启动一次，再进入

淡淡的烟草味﹌/ 2022年02月05日 02:57/ 0 赞/ 210 阅读

相关关于LineChart线条颜色和粗细的问题

最近在学习Chart的时候，遇到一个LineChart的线条Style的问题， var strok:Stroke = new Stroke(); strok.color

淡淡的烟草味﹌/ 2021年11月10日 07:24/ 0 赞/ 291 阅读