document.getElementById("myDiv").style.height = "200px"; // alternatively //document.getElementById("myDiv").style="height;200px"; document.getElementById("myRect").height.baseVal.value = 200; // alternatively //document.getElementById("myRect").setAttribute("height","200px");

交互

SVG 的另一个关键区分因素是能够进行代码交互且不复杂。正如 SVG 具有一个类似 HTML 的可编程 DOM 一样，它还具有事件模型。检查下面比矩形或正方形更复杂的图形：路径。

使用路径可绘制任意形状，例如在该示例中为表示美国的阿拉斯加州和夏威夷州的两个形状。

触发创建之前指定的警报的事件。这些复杂形状（像更简单的矩形）也会响应 CSS 选择器。使用一行 CSS 即可实现简单的突出显示机制：

CSS

path:hover {fill:yellow;}

Canvas

另一种向用户提供更丰富的图形体验的方法，通过 <canvas> 标记提供，该标记由 Apple for Safari 在 HTML5 中或在其他图形小工具中引入。它在绘制即时模式图形（包括矩形、路径和图像）方面公开更具编程性的体验，与 SVG 类似。即时模式图形呈现是一个“触发即忘”模型，该模型将图形直接呈现到屏幕上，但随后对所完成的操作不保留任何上下文。与保留模式相反，不保存呈现的图形；要在每次需要新框架时描述整个场景，开发人员需要重新调用所有必需的绘图命令，而不考虑实际更改（SVG 已知拥有“场景图”）。

元素

为了使用画布 (Canvas) 功能，Web 开发人员直接引入了一个 Canvas 元素：

HTML

然后使用 <canvas> 传统的2D基础库 API 来绘制图像和矢量。

使用 JavaScript 代码执行对画布上图形的操作，通过添加对图形的支持可以获得 Web 开发人员熟悉使用的优势。

JavaScript

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

如前面提到的，存在与 SVG 中相似的形状和对象，举例来说，开发人员可以使用下面的代码来绘制矩形：

JavaScript

ctx.fillStyle = "rgb(0,0,255)"; ctx.fillRect(10, 10, 100, 100);

稍后将讨论这些方法的优缺点以及适当的方案。

最终结果与在 SVG 中相同。

但正如 SVG 一样，Canvas 具有更复杂的几何基元，区别在于这些基元采用函数形式。

事件的可编程性

为了能够绘制比矩形更复杂的图形（如前面显示的夏威夷地图），

canvas

API 提供了一个路径 API，该路径 API 支持与 SVG 中的

&lt;path&gt;

元素相似的命令，只是你要对每一行代码段调用相应的 API，而不是在单个属性中列出它们：

JavaScript

ctx.beginPath(); ctx.moveTo(233.08751,519.30948); ctx.lineTo(235.02744,515.75293); ctx.lineTo(237.29070000000002,515.42961); ctx.lineTo(237.61402,516.23791); ctx.lineTo(235.51242000000002,519.30948); ctx.lineTo(233.08751,519.30948); ctx.closePath();

有关夏威夷地图，请参阅。

路径 API 并不局限于

moveTo

和

arc

，它包含相同的 SVG 方向相位（包括二次曲线和贝塞尔曲线）。

通过有限的事件和功能可以捕获鼠标在图像上的位置。因为不存在图形保留知识，所以编程人员必须转换

mouseX

标记的单个元素上的

mouseY

、

&lt;canvas&gt;

坐标，然后将该命令相应地传送到位于内存中结构中的形状。第三方库为支持更复杂的路径而存在，这包括内置isPointInPathAPI，但后者被限制为最后路径绘制。因而与 SVG 不同，既没有任何样式也不支持多个几何图上的命中检测。另外，因为 Canvas 不支持可伸缩性，所以缩放时夏威夷地图将很快失真：

Canvas 是一个功能强大的低级别 API，开发人员利用它可以提供新的图形体验。

Canvas 与 SVG 的简要摘要

下面是简要摘要，可帮助你确定何时使用 Canvas 而不使用 SVG 或者何时使用 SVG 而不使用 Canvas 来创建矢量图形。

Canvas SVG

基于像素（动态 .png） 基于形状

单个 HTML 元素 多个图形元素，这些元素成为 DOM 的一部分

仅通过脚本修改 通过脚本和 CSS 修改

事件模型/用户交互颗粒化 (x,y) 事件模型/用户交互抽象化 (rect, path)

图面较小时、对象数量较大 (>10k)（或同时满足这二者）时性能更佳 对象数量较小 (<10k)、图面更大（或同时满足这二者）时性能更佳

在上表中，考虑这二者在现有软件方面的意象模型。Canvas 类似于 MSPaint，在其中，你可以使用形状和其他工具来绘制和创建图像。SVG 类似于 Office PowerPoint 幻灯片，它具有可编程的支持并且能够添加主题。

何时使用

&lt;canvas&gt;

、何时使用 SVG：方案

这一节介绍这两种技术的技术优势和限制，包括用于确定一种技术何时相对于另一种技术更适合的常用方法。应该注意的是，SVG 和

&lt;canvas&gt;

都能实现几乎相同的结果，功能也完全重复。介绍以下特定情况非常重要：

&lt;canvas&gt;

明显好于 SVG，或相反，二者组合更加合适，或可以使用和考虑任一技术。