javascript - 为什么使用 <canvas> 而不是普通的旧 Javascript？

Question

<分区>

Answer 1

Canvas 需要 JavaScript 来做任何事情，所以它不是真正的 either 或“普通的旧 JavaScript” 请参见此处的简单示例:

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

然后使用 JS 代码在其上绘制:

  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);  
  }

在此之前，在 canvas JS 出现之前，您在屏幕上绘图时会被迫使用填充的 div 来制作形状。一个简单的矩形或正方形很容易，但绘制对 Angular 线将需要大量的单个像素 div，而绘制圆形则更糟。有像 Walter Zorn's library 这样的图书馆。 ，这是相当古老和知名的。除非您支持某些古老的浏览器，否则这似乎不是一个合理的方法。

正如人们所说，您可以运行 <canvas>在大多数浏览器中保存 Internet Explorer，您需要一个翻译库，如 Explorer Canvas这会将 Canvas 代码转换为 IE 的 native VML。然而，这对于任何复杂的东西都有问题，尤其是。鉴于您依赖 IE 的缓慢 JS 实现来进行翻译。

其他矢量图形替代品是当前讨厌的(叹息)Flash、IE 的 VML 直接编码为和 SVG(如果浏览器支持的话)。有传言说 IE9 将拥有 SVG，这是一个有趣的发展。

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

1. 它的文本支持非常 newish 所以把字体放到 canvas 只适用于最新的 东西(在其他情况下你需要 HTML/CSS 覆盖)或讨厌的黑客攻击 将字母表格绘制到 Canvas 。

2. 交互是半途而废。 如果你想制作 Canvas 绘图 clickable 你被迫使用 叠加图像映射或 div 标签或 做一些疯狂的像素 map 捕捉 事件并找出哪些像素 他们打了。 Canvas 图像是 渲染位图，真的不是 意味着要与多少人互动 人们想要。谷歌在去年 I/O 大会有点跳舞 围绕这个问题观看: http://www.youtube.com/watch?v=AusOPz8Ww80#t=48m54s&feature=player_embedded 立即模式API意味着没有 “采摘”-“ Canvas 不会长那个 ability” 他们提到 SVG 是 更好地跳过性能和 对此表示担忧 技术，简而言之 和非答案解决方案。

3. 没有原生 IE 支持。抱歉 该翻译库不会降低性能 它对于任何重要的事情和 显然 IE 仍然是浏览器的力量 不管你喜不喜欢。

但是，如果您必须选择基于非插件的绘图技术，即使有 IE 兼容库的 Canvas 显然也比旧的填充 div 更好，除非您需要古老的浏览器支持。