位图与矢量图

IT教程 4年前 (2020) https://www.55wd.com

点阵图

位图与矢量图

  • 位图(BitMap)
  • 矢量图

位图(BitMap)

位图又叫像素图,其构成最小单位是像素,在缩放过程中会失真。位图是一个 HTML 元素,其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控位图内单独的图形,不能对其中的具体图形进行监控。位图每次更改位图设置都会重新绘制,位图相对矢量图能达到更好的视觉效果,效果越复杂需要的像素越多,图像文件内存占比也越大

矢量图

矢量图也叫向量图,在缩放过程中不会失真。其创建的每一个元素都是一个独立的 DOM 元素,既然是独立的 DOM 元素,可以通过 css 和 JavaScript 来操控 dom,也可以对每一个 DOM 元素进行监听。对于矢量图浏览器会记录每个元素的形状和颜色算法,来达到缩放也不失真。矢量图轮廓形状更容易修改和控制,可以用来做前端优化,但是对于单独的对象,色彩上变化的实现不如位图来的方便直接

附一张表格来自掘金小册如何使用 Canvas 制作出炫酷的网页背景特效

Canvas svg
依赖分辨率(位图) 不依赖分辨率(矢量图)
单个 HTML 元素 每一个图形都是一个 DOM 元素
只能通过脚本语言绘制图形 可以通过 CSS 也可以通过脚本语言绘制
不支持事件处理程序 支持事件处理程序
弱的文本渲染能力 最适合带有大型渲染区域的应用程序(比如谷歌地图)
图面较小,对象数量较大(>10k)时性能最佳 对象数量较小 (<10k)、图面更大时性能更佳

QQ图 分位图理解 Python实现

原文地址:https://blog.csdn.net/weixin_40076694/article/details/80048105 qq图有两个作用:1、检验一组数据是否服从某一分布。2

手淘首页资源位图是什么?

手淘首页资源位图是什么?很多卖家还不清楚手淘首页资源位图是什么意思,哪些是手淘首页资源位图。装修宅小编为大家介绍手淘首页资

电脑键盘示意图(标准键位图)电脑键盘基本知识及其功能

电脑键盘作为电脑最常用输入设备,其重要性就不言而喻了,今天编辑为大家分享一下键盘的基本知识以及分享下笔者为大家制作的键盘示意

这个控件叫:Skeleton Screen/加载占位图

鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和

Inkscape将位图转换为矢量图

Inkscape是一款相当强大的矢量图工具,目前最

文章回顾

大家看了本文位图与矢量图的精彩教程资源内容,是不是对位图与矢量图了解更多,真心希望位图与矢量图能帮助到你, 小编会一直给你带来更多教程资源文章信息。

版权声明: 发表于 2020-03-13 12:34:30。

本文由第三方用户分享仅代表作者观点,不代表本网站立场,秉承互联网开放分享的精神,目的在于传递更多信息,加强各行业互通交流,但对内容不作任何保证或承诺,请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享,版权归原作者所有,本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益,请与我们联系,我们会及时处理。

豌豆资源网专注分享全网综合资源网站大全,致力于超实用的内容资源搜索。

转载请注明:
本文标题:位图与矢量图
本文地址:https://55wd.com/s12935/