Question

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

Answer 1

Canvas需要JavaScript才能执行任何操作，因此它不是真的，也不是“普通的旧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);  
  }

在此之前的前画布JS时代，当你在屏幕上绘图时使用填充的div来制作形状时，你会被迫使用。一个简单的矩形或正方形很容易，但画一条对角线需要大量的单像素div和一个圆甚至更糟。像Walter Zorn's library这样的库可以做到这一点，这是很老而且众所周知的。除非你支持一些古老的浏览器，否则这似乎不合理。

正如人们引用的那样，您可以在大多数浏览器中运行<canvas>保存您需要翻译库的Internet Explorer，例如Explorer Canvas这会将画布代码转换为IE的本机VML。然而，对于任何复杂性而言，这有点问题。鉴于你依赖IE缓慢的JS实现来进行翻译。

其他矢量图形选择是当前讨厌（叹气）Flash，IE的VML直接编码到和SVG如果浏览器支持它。 IE9将会有一个隆隆声，它将是一个有趣的发展。

关于Canvas与其他事物（最近当然是Flash）之间的这种牙齿的好奇之处在于缺乏对其实际应用挑战的真实讨论。 Canvas是一种非常酷的技术，但它有3个重要的问题/挑战（不一定按顺序）

其文字支持非常新的所以得到一个字体画布仅适用于最新版本东西（在其他情况下你需要 HTML / CSS叠加）或令人讨厌的黑客攻击将字母表格绘制到画布。
交互性是一个黑客，一半。 如果你想制作画布可点击你被迫使用重叠的图像映射或div标签或做一些坚果像素图捕捉事件和搞清楚什么像素他们打了。画布图像是渲染位图，真的不是意味着与多少人交往人们想要。谷歌在去年的 I / O会议有点跳舞围绕这个问题观看： http://www.youtube.com/watch?v=AusOPz8Ww80#t=48m54s&feature=player_embedded 立即模式API意味着没有 “挑选” - “帆布不会增长能力“他们提到了SVG 更好地跳过性能和比较关注技术，简而言之就是承认
没有原生IE支持。抱歉那个翻译库并没有明智地削减性能它适用于任何重要的事情显然IE仍然是浏览器的力量不管你喜不喜欢。

但是，如果你必须选择一个非基于插件的绘图技术，即使使用IE compat库，画布显然也比旧的div更好，除非你需要古老的浏览器支持。

Answer 2

<canvas>是a drawing surface，所以当您想要绘制自己的形状和诸如此类的东西时它很有用。

因此，它不是严格“而不是”JavaScript - 您使用JavaScript将内容绘制到<canvas>标记上。你不能真正使用JavaScript绘制HTML页面，而是操纵DOM元素 - 但这比绘图更常用，正如你的问题所认识的那样。

就个人而言，我想不出比编写一堆代码更糟糕的事情，比如在网页上绘制一个圆圈（我宁愿使用GUI软件制作图像文件），但是我d想象一下游戏和图表，那么这种控制水平是有用的。（你可以提取图像文件并在<canvas>上渲染它们，所以它不像你必须绘制所有内容。）

这里有一个类似于什么画布的实际问题：

What are unusual and creative usages of html5 canvas

也许可以在上面绘制公司徽标？下载一些JavaScript代码可能比图像文件更快。

Answer 3

性能优势：如果您只是模拟可以使用HTML / JS / CSS完成的事情......不，不是现在，而且很可能正好相反。如果创建和创建时间更短，我不会感到惊讶从服务器提供GD图像比在某些浏览器中呈现相同的图像。

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

Bespin - 绕过HTML元素以完全控制渲染的代码编辑器，最终结果在任何（帆布友好型）系统上看起来和行为完全相同，而不会影响HTML的悲惨怪癖和放大器;黑客攻击编码员的个人怪癖黑客。另见：Bespin and Canvas（读好！）。
WebGL - 3D API的OpenGL实现。它具有所有的数学帧缓冲和放大器。在高端游戏开发中你期望的纹理映射。我当然无法想象任何高清游戏机开发人员急于移动他们的游戏＆amp; Javascript的工具，但门开始打开。

与大多数HTML 5一样过于严密判断仍然太年轻。给它一两年时间，我们会更好地知道它是否能够获得Flash的冠军，或者它是否像VRML一样出现

Answer 4

是的，帆布演示非常令人印象深刻。这正是你使用canvas的原因。你可以用帆布做很多事情，单靠html / css / js就无法完成。查看MDC canvas tutorial并查看您认为仅使用html可以完成的示例的百分比。任何必须动态渲染的非平凡图形（例如charts）或交互式图形（例如games）都是画布的绝佳机会。

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

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

4 个答案: