网页中的非画布图形

Posted 2023-05-07

【中文标题】网页中的非画布图形

【英文标题】：Non-Canvas graphics in web pages

【发布时间】：2013-04-30 19:18:47

【问题描述】：

我是 Web 开发的完全新手，我想知道一些关于使用 javascript（不是 Flash 或其他插件）进行图形渲染的事情。例如，是否可以在不使用 html5 独有的 Canvas 功能的情况下在网页内渲染任意图形（例如线条、曲线、文本、图像等）？我之所以问，是因为我相信我已经看到 Google 例如在他们的主页上为他们的特殊周年纪念日之类的徽标增强功能之一显示交互式图形之前 HTML5 出现并且当前甚至不支持 HTML5 的浏览器。我还记得 90 年代在网页中看到过纯 JavaScript 制作的动画。

所以：

1) 使用纯 JavaScript 可以渲染这种图形吗？ 2) 如果是这样，正在使用哪些 API 或库？ 3) 是否可以用任意图形装饰标准 HTML 控件？

我正在尝试确定基于 Web 的 UI 的可能性范围。

【问题讨论】：

检查这些“旧”示例的来源并弄清楚它们是如何工作的！

好主意，但我不知道我仍然可以访问任何内容！

google.com/doodles

【参考方案1】：

例如，是否可以在不使用仅在 HTML5 中提供的 Canvas 功能的情况下在网页内呈现任意图形（例如线条、曲线、文本、图像等）？

是的。看看 SVG，它从 1992 年左右就以某种形式出现了。

Mozilla Developer Network 上有很多文档和教程。

我之所以问，是因为我相信我已经看到 Google 例如在 HTML5 出现之前在其主页上为他们的徽标增强功能之一展示交互式图形，等等，在 HTML5 出现之前并且目前在甚至不支持 HTML5 的浏览器中。

您看到了 SVG，Google 过去曾将其用于 Google 涂鸦，现在仍然用于各种东西（某些平台上的部分 Google 地图）。

【讨论】：

谢谢西蒙。我知道我所看到的一些内容可能是用 SVG 完成的，但我并不完全相信它可以解释一切。我记得在 90 年代打开一个网页并看到几个弹跳球在整个页面上飞舞的动画（即不限于 SVG 元素），当时我记得页面上说动画是用纯 JavaScript 完成的.这是怎么做到的？我可以使用 JavaScript 在页面本身的任何位置（例如标准元素的顶部或周围）绘制图形吗？

@FelixBembrick 很可能是使用 javascript 在页面上移动图像。所以动画是用JS做的，但是图片不是。

@Mathletics 几乎可以肯定就在这里。开发人员一直在用动画 DOM 元素（SVG 或非 SVG）惹恼用户。

对，所以使用 JavaScript 我可以在页面周围移动图像，但是没有实际的方法可以在 SVG 或 HTML5 Canvas 等专用元素之外呈现任意图形？你能确认一下吗？

@FelixBembrick 正确，您不能单独使用 JS 创建任意图形。