企业查询网站企查查,深圳网站建设公司盛世华彩,wordpress上传附加,wordpress取消邮箱注册SVG 和 Canvas 都是可以在 Web 浏览器中绘制图形的技术。 众所周知#xff0c; icon 通常使用 svg#xff08;如 iconfont#xff09;#xff0c;而交互式游戏采用 Canvas。二者具体的区别是什么#xff1f;该如何选择#xff1f; 声明式还是命令式#xff1f;绘制的图形…SVG 和 Canvas 都是可以在 Web 浏览器中绘制图形的技术。 众所周知 icon 通常使用 svg如 iconfont而交互式游戏采用 Canvas。二者具体的区别是什么该如何选择 声明式还是命令式绘制的图形不同Svg 绘制矢量图不依赖分辨率Canvas 绘制位图依赖分辨率事件处理不同Svg 基于 XML对 DOM、事件友好Canvas 通过 javascript 绘制内部元素添加事件比较复杂Svg 对于 css 更加友好
声明式 pk 命令式
Svg 是矢量【声明式】
可缩放矢量图形Scalable Vector GraphicsSVG基于 XML 标记语言用于描述二维的矢量图形。
作为一个基于文本的开放网络标准SVG 能够优雅而简洁地渲染不同大小的图形并和CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上SVG 相对于图像就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
SVG 代码可以直接在 HTML 中运行就像声明性绘图指令
svg viewBox0 0 100 100circle cx50 cy50 r50 /
/svg和传统的点阵图像模式JPEG、PNG不同的是SVG 格式提供的是**矢量图这意味着它的图像能够被无限放大而不失真或降低质量并且可以方便地修改内容无需图形编辑器。**通过使用合适的库进行配合SVG 文件甚至可以随时进行本地化。
如果关心图形的灵活性和响应不失真能力SVG 就是最佳选择。
Canvas 是一个 JavaScript 绘图 API【命令式】
Canvas 提供了一个通过 JavaScript 和 HTML 的元素来绘制图形的方式。
将一个canvas元素放入 HTML 中然后使用 JavaScript 进行绘图。换句话说可以发出命令告诉它如何绘制典型的命令式
canvas idmyCanvas width100 height100/canvas
scriptvar canvas document.getElementById(myCanvas);var context canvas.getContext(2d);var centerX canvas.width / 2;var centerY canvas.height / 2;var radius 50;context.beginPath();context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);context.fillStyle green;context.fill();
/scriptDOM pk 画布
SVG 在 DOM 中
如果熟悉 DOM 事件例如click和mouseDown等那么 SVG 中也可以使用这些事件。
svg viewBox0 0 100 100circle cx50 cy50 r50 /scriptdocument.querySelector(circle).addEventListener(click, e {e.target.style.fill red;});/script
/svgcanvas 像画布
具有大量复杂细节和渐变的高度交互性工作是 Canvas 的领域。DOM 管理元素越多速度就越慢移动的元素越多速度就越慢。且 Canvas 有不错的性能保障。由于这个原因使用 Canvas 构建的游戏比使用 Svg 构建的游戏多得多。
与 CSS 的友好性
svg 可以很好的结合 css
与上述事件方式类似可以通过css进行样式处理
svg viewBox0 0 100 100circle cx50 cy50 r50 /stylecircle { fill: blue; }/style
/svg
