本文目录导航：
从计算机解决图像的角度看,图形和图像、图像和视频、视频和动画有没有区别
图形和图像、图像和视频、视频和动画有区别。区别如下：
（1）含意不同
图形普通指用计算机绘制的画面，如直线、圆、圆弧、恣意曲线和图表等；图像则是指由输入设施捕捉的实践场景画面或以数字化方式存储的恣意画面。
（2）组成不同
图像是由一些陈列的像素组成的，在计算机中的存储格局有BMP、PCX、TIF、GIFD等，普通数据量比拟大。
它除了可以表白实在的照片外，也可以体现复杂绘画的某些细节，并具备灵敏和富裕发明力等特点。
与图像不同，在图形文件中只记载生成图的算法和图上的某些特点，也称矢量图。
在计算机恢复时，相邻的特点之间用特定的很多段小直线衔接就构成曲线，若曲线是一条敞开的图形，也牢靠着色算法来填充色彩。
（3）显示速度不同
图形只保管算法和特色点，所以相关于位图（图像）的少量数据来说，它占用的存储空间也较小。
但由于每次屏幕显示时都须要从新计算，故显示速度没有图像快。
（4）打印时能否失真
在打印输入和加大时，图形的品质较高而点阵图（图像）常会出现失真。
图形是指在一个二维空间中可以用轮廓划分出若干的空间状态，图形是空间的一局部不具备空间的延展性，它是局限的可识别的状态。
二、图像与视频的区别
图像和视频：最大区别就是图像是运动的图像信号，而视频则是延续的。
视频是指从摄像机、录像机、影碟机等影响设施获取的延续优惠图像信号，由若干有咨询的实在图像数据延续播放构成，其相似于电影和电视。
多媒体计算机上的视频是数字化视频，可更繁难地启动存储、重放和各种不凡成果的解决。
三、视频和动画的区别
视频和动画：最大区别就是视频是一组实在图像数据延续播放构成而动画则是由计算机模拟的延续图像播放而成。
动画是借助计算机生成的一系列延续运动的图画。
用多媒体计算机成功的动画有两种，一种叫外型动画，另一种叫帧动画。
帧动画是由一幅幅延续的画面组成的图形或图像序列。
与视频影响不同的是，动画是由计算机绘制生成的非实在图形或图像。
外型图画则是对每一个优惠的对象区分启动设计，赋予每一个对象一些特色（如状态、大小、色彩等），而后这些对象组成完整的帧动画。
动画可增强视觉成果，起到强调主题、参与活泼兴趣的作用。
多媒体计算机罕用的图像包含
多媒体计算机罕用的图像包含，静态图像，照片，图形和视频。
多媒体计算机是能够对声响，图像，视频等多媒体消息启动综合解决的计算机，多媒体消息关键包含文本，图像，动画，声响，视频影像。
多媒体计算机罕用的图像
动画是应用人的视觉暂留个性，极速播放一系列延续运动变动的图形图像，也包含画面的缩放，旋转，变换，淡入淡出等不凡成果，经过动画可以把笼统的内容笼统化，使许多难以了解的教学内容变迁活泼幽默，正当经常使用动画可以到达事倍功半的成果。
视频影像具备时序性与丰盛的消息外延，罕用于交待事物的开展环节，视频十分相似于咱们熟知的电影和电视，绘声绘色，在多媒体中充任起关键的角色，图像是多媒体软件中最关键的消息体现方式之一，它是选择一个多媒体软件视觉成果的关键起因。
前端4种渲染技术的计算机实践基础
前端可用的渲染技术有html+css、canvas、svg、WebGL，咱们会综合运用这些技术来绘制页面。有没有想过这些技术有什么区别和咨询，它们和图形学有什么相关呢？
本文咱们就来谈一下网页渲染技术的计算机实践基础。
渲染的实践基础人眼的视网膜有视觉暂留机制，也就是看到的图像会继续保管0.1s左右，图形界面就是依据这个原理来设计的一帧一帧刷新的机制，要保障1s至少要渲染10帧，这样人眼看到画面才是延续的。
每帧显示的都是图像，它是由像素组成的，是显示的基本单位。
不同显示器成功像素的原理不同。
咱们要绘制的指标是矩形、圆形、椭圆、曲线等各种图形，绘制完之后要把它们转成图像。
图形的绘制有一系列的实践，比如贝塞尔曲线是画曲线的实践。
图形转图像的环节叫做光栅化。
这些图形的绘制和光栅化的环节，都是图形学钻研的内容。
图形或许做缩放、平移、旋转等变动，这些是经过矩阵计算来成功的，也是图形学的内容。
除了2D的图形外，还要绘制3D的图形。
3D的原理是把一个个三维坐标的顶点连起来，构成一个一个三角形，这是外型的环节。
之后再把每一个三角形的面贴上图，叫做纹理。
这样组成的就是一个3D图形，也叫3D模型。
3D图形也雷同须要教训光栅化变成二维的图像，而后显示进去。
这种三维图形的光栅化须要找一个角度去观察，就像拍照一样，所以普通把这个概念叫做相机。
同时，为了3D图形更实在，还引入了光线的概念，也就是一束光照上来，3D图形的每个面都会有什么变动，怎样反射等。
不同材质的物体反射的方式不同，比如漫反射、镜面反射等，也就有不同的计算公式。
一束光会照耀到一些物体，到物体的反射，这个环节须要一系列跟踪的计算，叫做光线追踪技术。
咱们也能感触进去，3D图形的计算量比2D图形大太多了，用CPU计算很或许达不到1s大于10帧，所以后面出现了专门用于3D渲染减速的配件，叫做GPU。
它是专门用于这种并行计算的，可以批量计算一堆顶点、一堆三角形、一堆像素的光栅化，这个渲染流程叫做渲染管线。
如今的渲染管线都是可编程的，也就是可以管理顶点的位置，每个三角形的着色，这两种区分叫做顶点着色器（shader）、片元着色器。
总之，2D或3D的图形经过绘制和光栅化就变成了一帧帧的图像显示进去。
变成图像之后其实还可以做一些图像解决，比如灰度、反色、高斯含糊等各种滤镜的成功。
所以，前端的渲染技术的实践基础是计算机图形学+图像解决。
不同的渲染技术的区别和咨询详细到前前端的渲染技术来说，html+css、svg、canvas、webgl都是用于图形和图像渲染的技术，然而它们各有并重：
html+css
html+css是用于图文规划的，也就是计算文字、图片、视频等的显示位置。
它提供了很多计算规定，比如流式规划很适宜做图文排版，弹性规划易于做自顺应的规划等。
然而它不适宜做更灵敏的图形绘制，这时就要用其余几种技术了。
canvas是给定一块画布区域，在不同的位置画图形和图像，它没有规划规定，所以很灵敏，罕用来做可视化或许游戏的开发。
然而canvas并不会保管绘制的图形的消息，生成的图像只能显示在固定的区域，当显示区域变大的时刻，它不能追随一同放缩，就会失真，假设有放缩不失真的需求就要用其余渲染技术了。
svg会在内存中保管绘制的图形的消息，显示区域变动后会从新计算，是一个矢量图，罕用于icon、字体等的绘制。
webgl
下面的3种技术都是用于2D的图形图像的绘制，假构想绘制3D的内容，就要用webgl了。
它提供了绘制3D图形的api，比如经过顶点构成3D的模型，给每一个面贴图，设置光源，而后光栅化成图像等的api。
它罕用于经过3D内容增强网站的交互成果，3D的可视化，3D游戏等，再就是虚构事实中的3D交互。
所以，只管前端渲染技术的底层原理都是图形学+图像解决，但下层提供的4种渲染技术各有并重点。
不过，它们还是有很多相反的中央的：
位置、大小等的变动都是经过矩阵的计算
都要经过图形转图像，也就是光栅化的环节
都允许对图像做进一步解决，比如各种滤镜
html+css渲染会分不同图层区分做计算，canvas也会依据计算量分红不同的canvas来做计算
由于他们底层的图形学原理还是分歧的。
除此以外，3D内容，也就是webgl的内容会经过GPU来计算，但css其实也可以经过GPU计算，这叫做css的配件减速，有四个属性可以触发配件减速：transform、opacity、filter、will-change。（更多的GPU和css配件减速的内容可以看这篇文章：这一次性，彻底搞懂GPU和css配件减速）
编译原理的运行
除了图形学和图像技术外，html+css还用到了编译技术。
由于html、css是一种DSL（dominspecificlanguage，畛域特定言语），也就是专门为界面形容所设计的言语。
用html来表白dom结构，用css来给dom参与样式都只须要很少的代码，而后运转时解析html和css来创立dom、参与样式。
DSL可以让特定畛域的逻辑更容易表白，前端畛域还有一些其余技术也用到了DSL，比如graphql。
总结
由于人眼的视觉暂留机制，只需每帧绘制不超越0.1s，人看到的画面就是延续的，这是显示的原理。
每帧的绘制要经过图形绘制和图形转图像的光栅化环节，2D和3D图形区分有不同的绘制和光栅化的算法。
此外，转成图像之后还可以做进一步的图像解决。
前端畛域的四种渲染技术：html+css、canvas、svg、webgl各有并重点，区分用于不同内容的渲染：
html+css用于规划
canvas用于灵敏的图形图像渲染
svg用于矢量图渲染
webgl用于3D图形的渲染
但他们的实践基础都是计算机图形学+图像解决。（而且，html+css为了繁难逻辑的表白，还设计了DSL，这用到了编译技术）
这四种渲染技术看似差异很大，但无实践基础层面，很多物品都是一样的。
这也是为什么咱们要去学计算机基础，由于它可以让咱们对技术有一个更深化的更实质的了解。
