为什么要使用<；帆布>；而不是普通的老Javascript？

HTML5画布上的一些演示非常令人印象深刻，但我有点困惑。canvas元素可以做什么，而传统的JS/jQuery和CSS3/HTML5做不到？有性能优势吗？

是的，画布演示令人印象深刻。这正是您使用画布的原因。您可以使用canvas完成许多单独使用html/css/js无法完成的事情。浏览，看看您认为仅使用html就可以完成的示例的百分比。任何非平凡的图形，必须在运行中呈现（例如）或交互式图形（例如），都是画布的完美机会

您将无法在IE中绘制更复杂的图形或动画，但使用IE，您可以在任何主流浏览器中渲染大部分工作。

是，因此当您想要绘制自己的形状等时，它非常有用

因此，它不是严格意义上的“而非”JavaScript——您可以使用JavaScript将内容绘制到

标记上。您无法使用JavaScript在HTML页面上绘制，而只能操作DOM元素——但正如您的问题所认识到的，这比绘制更有用

就我个人而言，我想不出比写一堆代码在网页上画一个圆圈更糟糕的事情了（我更愿意使用GUI软件制作一个图像文件），但我认为对于游戏和图表来说，这种控制级别是有用的。（您可以拉入图像文件并在

上进行渲染，这样就不必绘制所有内容。）

这里有一个类似的问题：“画布到底是什么？”

---

也许可以在上面画上公司的标志？一点JavaScript代码的下载速度可能比图像文件快。

性能优势：如果您只是在模拟可以用HTML/JS/CSS完成的事情。。。不，现在不行，很可能正好相反。如果从服务器创建和交付GD映像所需的时间比在某些浏览器中渲染GD映像所需的时间要少，我也不会感到惊讶

至于区别。。。这就像将标准Windows GUI表单与DirectX进行比较一样。你可以通过拉伸和滥用通常的HTML元素来做一些巧妙的事情，但是画布是绝对控制像素的。有两个具体的例子来说明这是多么大的一笔交易，一个是实用的，另一个不是：

• -一个代码编辑器，它绕过HTML元素来完全控制渲染，最终结果在任何（画布友好）系统上的外观和行为都完全相同，而不会将HTML的糟糕怪癖和黑客行为与程序员的个人怪癖和黑客行为对立起来。另请参见：（好阅读！）

• -OpenGL的一个实现，即3D API。它拥有高端游戏开发中所期望的所有mathtastic帧缓冲和纹理映射。我当然无法想象任何高清游戏机开发者会争先恐后地将他们的游戏和工具移植到Javascript中，但门已经开始打开了

---

像大多数HTML5一样，它还太年轻，不能太仔细地判断。给它一两年的时间，我们将更好地了解它是否能够夺走Flash的王冠，或者它是否正在像这样发展。

Canvas需要JavaScript来做任何事情，因此它不是一个真正的或“普通的旧JavaScript”见这里的简单示例：

<canvas id='myCanvas' height='200' width='200'><canvas>

在此之前，在画布出现之前的JS时代，在屏幕上绘制图形时，您可能会被迫使用填充的div来制作形状。一个简单的矩形或正方形很容易，但画一条对角线需要大量的单像素div和一个更糟糕的圆。有这样做的图书馆，这是非常古老和众所周知的。除非你支持一些古老的浏览器，否则这似乎不是一个合理的选择

正如人们所引用的，您可以在大多数浏览器中运行

，“保存Internet Explorer”，您需要这样的翻译库，将画布代码翻译为IE的本机VML。然而，这对于任何复杂的东西都是有点问题的，特别是在你依赖IE的slowish JS实现来完成翻译的情况下

其他矢量图形的替代品是当前流行的Flash（sigh），即直接编码到的VML和SVG（如果浏览器支持）。有传言称IE9将拥有SVG，这是一个有趣的发展

令人好奇的是，关于画布与其他事物（当然是最近的Flash）的争论缺乏对其实际应用挑战的真正讨论。Canvas是一项非常酷的技术，但它有3个重要的问题/挑战（不一定按顺序排列）

它的文本支持非常强大 新潮的因此，将字体添加到 canvas仅适用于最新版本 材料（在其他情况下，您需要 HTML/CSS覆盖）或恶意攻击 把字母表格画在纸上 帆布

交互性是一种技巧。 如果你想画一幅画布 可单击您被强制使用 重叠图像贴图或div标记或 做一些疯狂的像素贴图捕捉 事件并找出什么像素 他们击中了。画布图像是一个 渲染位映射，而实际上不是 意味着与多少人互动 人们想要。谷歌在去年的 I/O会议 围绕这个问题，请注意： 即时模式API意味着没有 “拾取”-“画布不会长出这样的长度 “能力”指的是SVG的存在 更好地跳过性能和性能 compat对此表示关注 简而言之，技术是一种承认 和非答案解决方案

没有本地IE支持。抱歉 那个翻译库并没有降低性能 对于任何有意义和有价值的事情 显然，IE仍然是一种浏览器力量 不管你喜不喜欢

然而，如果您必须选择一种非基于插件的绘图技术，那么canvas即使使用IE compat库也明显优于o

  var canvas = document.getElementById("myCanvas");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect (10, 10, 50, 50);  
  }