像素小方块区别

上面的每个小方块就是一个放大了的像素点(英文Pixel,简称P)，屏幕就是通过这样的一个个的像素点来组合形成画面的。把小方块（像素点）拉小，显示更多的屏幕面积后，就是这样：

可以看到，在每个像素点的内部，又有三个*像素点（小小方块)，分别就是RGB，通过每个像素点调整不同的RGB比例，来显示不同的颜色。----注意，每个没红绿兰颜色的小方块只是像素点的示意图，实际真实的像素点就是有红绿兰颜色的三个小方块。这个可以用手机相机对着电视屏幕在拍摄界面下把图像拉大看到。

类型定义位图图像**位图又被称作点阵图或栅格图像**，它的特点就是，整幅图由许多的‘点’组成，这些‘***们称为“像素”。在位图模式下，计算机会将图片的每个像素点进行保存。当位图放大到一定程度时，我们会发现图片是由一个一个的小方块组成，这些小方块就是像素点矢量图像矢量图像，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体，就可以在维持它原有清晰度和弯曲度的同时，多次移动和改变它的属性，而不会影响图例中的其它对象。

可以清楚看到有一个个小方块，那就是一个纹素，但是屏幕的一个像素点肯定比这个小得多，所以在这种情况下，图片本身的纹素数量并没有改变,所以这里一个纹素是由多个屏幕像素显示出来的。

最开始需要实现马赛克功能是需要通过canvas提供的一个获取到图片每一个像素的方法，我们都知道，图片本质上只是由像素组成的，越清晰的图片，就有着越高的像素，而像素的本质，就只是一个个拥有颜色的小方块而已，只要把一张图片放大多倍，就能够清楚的发现。