canvas判断画笔是否铺满区域

news2024/11/15 20:02:07

判断画布形状是否填满和百分比

在这里插入图片描述

<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle = "#FF0000";
ctx.rect(20,20,150,100);
ctx.stroke();
	
	//模拟用户画笔填充
	ctx.fillStyle="#FF0000";
	ctx.fillRect(20,20,80,80);
	//获取画布中数据
	/*
	*	对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
		R - 红色（0-255）
		G - 绿色（0-255）
		B - 蓝色（0-255）
		A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
	*/
	var imgData=ctx.getImageData(20,20,150,100);
</script>

在这里插入图片描述

在绘制完成后，使用ctx.getImageData()方法获取画布的像素数据 返回格式：Uint8ClampedArray。
遍历像素数据，判断每个像素的颜色值是否等于画笔的颜色。如果相等，则说明该像素是由画笔绘制的；
如果不相等，则说明该像素不是由画笔绘制或者用户没有填充满。
根据遍历的结果，可以判断出画笔是否铺满整个画布。不好理解的话，直接看最下面(尾部)图片后再来看

在这里插入图片描述
类似于这样，其中A是255

以下是一个示例代码：

// 获取绘图上下文和绘图目标  
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle = "#FF0000";
ctx.rect(20,20,150,100);
ctx.stroke();
	
	//模拟用户画笔填充
	ctx.fillStyle="#FF0000";
	ctx.fillRect(20,20,80,80);
	//获取画布中数据 获取像素数据  
	/*
	*	对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
		R - 红色（0-255）
		G - 绿色（0-255）
		B - 蓝色（0-255）
		A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
	*/
	var imgData=ctx.getImageData(20,20,150,100);
  
	let data = imageData.data;  
  
	// 遍历像素数据，判断画笔是否铺满整个画布  
	let isFull = true;  
	for (let i = 0; i < data.length; i += 4) {  
	    if (data[i] !== 255 || data[i + 1] !== 0 || data[i + 2] !== 0 || data[i + 3] !== 255) {  
	        isFull = false;  
	        break;  
	    }  
	}  
  
	// 判断结果输出  
	console.log(isFull ? '已铺满' : '未铺满');

在上述示例代码中，假设画笔的颜色为红色（RGB值为255,0,0），则遍历像素数据时判断每个像素的RGB值是否都为红色，如果存在其他颜色，则说明画布未被铺满。
填充像素数据如下：
在这里插入图片描述
未填充地方如下：

百分比判断：

比方说这个正方形，通过if (data[i] !== 255 || data[i + 1] !== 0 || data[i + 2] !== 0 || data[i + 3] !== 255) 判断像素数据
当满足用户画笔的进行计数，和总共点数比例，即可得出百分比
如：

//满足用户在该形状中所画的图像数据点
let drawCount = 0; //满足的像素点
let total = data.length/4;   //总共像素点
if (!(data[i] !== 255 || data[i + 1] !== 0 || data[i + 2] !== 0 || data[i + 3] !== 255)){
	drawCount++;
}
//在区域形状内，用户画的比例
console.log((drawCount / total)*100+'%' )