本文介绍了SVG、Canvas和X3D三种Web图形技术。SVG是基于XML的2D矢量图形格式，适用于声明式图形绘制，与JavaScript库如D3结合能实现丰富的数据可视化。Canvas通过JavaScript进行即时模式图形绘制，2D和WebGL上下文分别支持2D和3D图形，但缩放时可能造成图像模糊。X3D则是一种声明式的3D图形标准，适用于现代Web场景。
一、SVG：可伸缩的矢量图形（声明式方法：保留模式图形绘制）
SVG 本身是基于 XML 的一种独立的数据格式，用于声明式的 2D 矢量图形。但是，它也可以嵌入到 HTML 文档中，这是所有主流浏览器都支持的。
使用 SVG 绘制一个可调整大小的圆：
<html style="height: 100%; width: 100%">
<body style="height: 100%; width: 100%; margin: 0px">
<svg style="height: 100%; width: 100%; display: block" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="25" fill="red" stroke="black"
vector-effect="non-scaling-stroke" />
</svg>
</body>
</html>
当浏览器窗口调整大小或缩放时，它将重新缩放图像，而不会丢失图像的任何质量（因为图像是根据形状定义的，而不是根据像素定义的）。当 SVG 元素被 JavaScript 代码修改时，它还会自动重新绘制图像，这使得 SVG 特别适合与 **JavaScript 库（如 D3）**一起使用，D3 将数据绑定到 DOM 中的元素，从而能够创建从简单图表到更奇特的交互式数据可视化的任何内容。
二、画布canvas（函数式方法：即时模式图形绘制）
canvas 元素只是在网页上提供了一个可以绘图的区域。使用 JavaScript 代码，首先从画布获取上下文，然后使用提供的 API，定义绘制图像的函数。
const canvas = document.getElementById(id);
const context = canvas.getContext(contextType);
// call some methods on context to draw onto the canvas
当脚本执行时，图像立即绘制成了底层位图的像素，浏览器不保留绘制方式的任何信息。为了更新绘图，需要再次执行脚本。重
最低0.47元/天 解锁文章
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
