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

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的图书馆这样的图书馆就是这样做的,这个图书馆很古老而且很有名.除非你支持一些古老的浏览器,否则这似乎不合理.

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

其他矢量图形替代品是目前讨厌的(叹气)Flash,IE的VML直接编码到和SVG,如果浏览器支持它.IE9将会有一个隆隆声,它将是一个有趣的发展.

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

1. 它的文本支持非常 新,所以将字体放到画布上只能用于最新的东西(在其他情况下你需要HTML/CSS叠加)或讨厌的黑客将字母形式绘制到画布上.

2. 交互是一个黑客和一半. 如果你想制作一个可点击的画布,你就不得不使用叠加的图像贴图或div标签,或者做一些坚果像素图捕捉事件并弄清楚它们击中的像素.画布图像是一个渲染的位图,实际上并不意味着需要与多少人进行交互.谷歌在去年的I/O大会上有点围绕这个问题大喊:http : //www.youtube.com/watch?v= AusOPz8Ww80#t=48m54s&feature=player_embedded 立即模式API意味着没有"挑选" - "画布赢了"增加这种能力"他们提到SVG会更好地超越性能并且更加关注该技术,简而言之就是入场和非答案解决方案.

3. 没有本机IE支持. 对不起,翻译库并没有因为任何重要的事情而削减性能,而且无论你喜欢与否,IE仍然是一个浏览器强制.

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