html5 粒子组合成logo 的制作思路及方法

 

 

前几天在朋友圈发了几条3D demo视频，其中就有3D空间组成各种图形。如上！

那么这些图形的每个mesh的坐标可不是手动去写，如果你愿意我当然不拦着！所以今天这篇就来介绍如何获得这些图形的坐标数据。

 

我们首先打开 http://www.w3school.com.cn/tags/canvas_getimagedata.asp 

然后仔细阅读后

我们可以发现 一个API： getImageData() 可以获得 canvas当前画面上的图像数据。

每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)

G - 绿色 (0-255)

B - 蓝色 (0-255)

A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

 

那么对于下面这张图(100*100)，处理成 黑白两色（纯黑，纯白）

我们通过getImageData()  获得数据 应该有 100*100*4条数据，并且他们是

[222,214,111,255,124,222,125,255......] 这样的形式在数组中

 ↑     第一个像素   ↑ ↑     第二个像素   ↑

像素点是从左至右，从上至下的顺序写入的！

 

得到数据后，我们是不是可以很轻松的判断每个点的颜色情况。

例如

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height).data;

if(imgData[0]+imgData[0+1]+imgData[0+2]==0)
{
  console.log("第一个像素为 黑色")  
}

if(imgData[4]+imgData[4+1]+imgData[4+2]==0)
{
  console.log("第二个像素为 黑色")  
}

看了以上代码可能还有疑惑，请从新理解以上加粗、彩色文字部分

 

都到这里了想必你已经能走自己获得SINA这张图黑色点的坐标了吧！所以下面直接给全部代码了

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');	

var _img=new Image()
_img.onload=function()
{
	ctx.drawImage(_img,0,0)

	var imgData = ctx.getImageData(0, 0, 100, 100).data;
	//ctx.clearRect(0,0,100,100)
	var data = getDataPoint(imgData);
	//好了data 已经使我们取到点的坐标信息了，那么我们可以自由发挥了
	console.log(data[0].x,data[0].y)
}
_img.src="contact_p.png"
	
	
//随机取出400个黑色点的坐标
function getDataPoint(_data)
{
	var _arr=[];
	for(var i=0;i<400;i++)
	{
		function redo()
		{
			var x=Math.floor(Math.random()*100)
			var y=Math.floor(Math.random()*100)
			var p=x*4 + y*4*100
			//
			var r=_data[p];
			var g=_data[p+1];
			var b=_data[p+2];
			//alpha=_data.data[3];
			r+g+b==0?_arr.push({x:x,y:y}):redo()
		}
		redo()
	}
	return _arr	
}

以上代码 为手工代码，难免有错误，如果无法使用，请留言