huabingtao / front-knowledge

基于Issues系统学习前端技术
0 stars 0 forks source link

矢量图形 #9

Open huabingtao opened 4 years ago

huabingtao commented 4 years ago
huabingtao commented 4 years ago

了解什么是矢量图形?它和栅格图形的区别?

计算机图形系统分为两大系统,一个是栅格图形另一个就是矢量图形。

栅格图形系统中每个块被分为一个个网格,图像的最终呈现是通过网格中的颜色填充而实现的

矢量图形则是基于描述要绘制从某个点到另一个点的直线或曲线。所以说为什么矢量图形放大而不会失真也正是因为这个原因。

SVG是什么?

SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种 XML 应用,可以以一种简洁、可移植的形式表示图形信息。

手写一个简单的SVG

我使用svg 以中心点 x 坐标70 y坐标 70 为圆心 50 为半径 blue 为填充色画一个圆

<svg width="300" height="200">
  <circle cx='70' cy='70' r='50' fill='blue'></circle>
</svg>