SVG和Canvas绘图(一)

 我来答
机器1718
2022-06-20 · TA获得超过6834个赞
知道小有建树答主
回答量:2805
采纳率:99%
帮助的人:161万
展开全部

栅格图形 ,也叫做点阵图,位图(bitmap),像素图,图像是由像素构成的,像素的多少将决定图像的显示质量和文件大小,图像的分辨率越高,其显示越清晰,文件所占的空间也就越大。图像放大时会失真,可以看到整个图像是由很多像素组合而成的。

矢量图形 使用 XML 来描述二维图形和绘图程序,矢量图像在放大或改变尺寸的情况下其图形质量不会有所损失。

<canvas>和<svg>都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …),还有完整的动画,事件机制,本身就能独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition) ,两者的主要特点见下面的表格:

SVG

Canvas

图形和图表
svg和Canvas都可以表现图表(如柱状图, 散点图, 饼图等等),常用的图形图表库中,百度的echarts是基于Canvas实现的,D3是基于svg实现的。

xmlns属性可定义SVG 命名空间(如果将SVG内嵌在HTML页面中并作为该页面提供,则不需要xmlns属性)。

使用 <g> 元素,可以对多个元素进行分组

path元素是SVG基本形状中功能最强大的一个,它不仅能创建其他基本形状,还能创建更多其他形状。你可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形,以及一些其他的形状,例如贝塞尔曲线、2次曲线等。
path元素的形状是通过属性d来定义的,属性d的值是一个“命令+参数”的序列。

下面的命令可用于路径数据:(命令详情可查看 https://segmentfault.com/a/1190000005053782 )

viewBox的四个参数分别代表:最小X轴数值;最小y轴数值;宽度;高度。
用于svg整体缩放

表示虚线描边。可选值为:none, <dasharray>, inherit. 其中,none表示不是虚线;<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。

表示虚线的起始偏移。可选值为:<percentage>, <length>, inherit. 百分比值,长度值,继承。

如果stroke-dasharray值很大,超过了描边路径的总长度,加以css动画改变stroke-dashoffset值,就会出现一段时间内描边显示从无到有。


已赞过 已踩过<
你对这个回答的评价是?
评论 收起
AiPPT
2024-09-19 广告
随着AI技术的飞速发展,如今市面上涌现了许多实用易操作的AI生成工具1、简介:AiPPT: 这款AI工具智能理解用户输入的主题,提供“AI智能生成”和“导入本地大纲”的选项,生成的PPT内容丰富多样,可自由编辑和添加元素,图表类型包括柱状图... 点击进入详情页
本回答由AiPPT提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式