上面的每个小方块就是一个放大了的像素点(英文Pixel,简称P),屏幕就是通过这样的一个个的像素点来组合形成画面的。把小方块(像素点)拉小,显示更多的屏幕面积后,就是这样:
可以看到,在每个像素点的内部,又有三个*像素点(小小方块),分别就是RGB,通过每个像素点调整不同的RGB比例,来显示不同的颜色。----注意,每个没红绿兰颜色的小方块只是像素点的示意图,实际真实的像素点就是有红绿兰颜色的三个小方块。这个可以用手机相机对着电视屏幕在拍摄界面下把图像拉大看到。
类型定义位图图像**位图又被称作点阵图或栅格图像**,它的特点就是,整幅图由许多的‘点’组成,这些‘***们称为“像素”。在位图模式下,计算机会将图片的每个像素点进行保存。当位图放大到一定程度时,我们会发现图片是由一个一个的小方块组成,这些小方块就是像素点矢量图像矢量图像,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体,就可以在维持它原有清晰度和弯曲度的同时,多次移动和改变它的属性,而不会影响图例中的其它对象。
可以清楚看到有一个个小方块,那就是一个纹素,但是屏幕的一个像素点肯定比这个小得多,所以在这种情况下,图片本身的纹素数量并没有改变,所以这里一个纹素是由多个屏幕像素显示出来的。
最开始需要实现马赛克功能是需要通过canvas提供的一个获取到图片每一个像素的方法,我们都知道,图片本质上只是由像素组成的,越清晰的图片,就有着越高的像素,而像素的本质,就只是一个个拥有颜色的小方块而已,只要把一张图片放大多倍,就能够清楚的发现。