html5canvas如何判断浏览器是否支持HTML5 Canvas

p5.js和html5 canvas两者有何区别？

简单的说，p5.js是一个js类库；canvas是一个html5新增的一个元素，"canvas" 即 "画布", ?此元素是为了客户端矢量图形而设计的。

它自己没有行为，却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

两者要想绘图，都需执行js代码。

仔细看p5的初始代码， function?setup()?{ ??createCanvas(400,?400);//为html页面创建canvas元素 }两者的本质都是通过js来实现canvas的表现，p5.js与jquery库无异，将一些常用的功能需求的代码进行封装，以实现代码的简化。

也就是任何p5.js可实现的，通过纯canvas的js api都能实现，不过要想实现，往往牺牲得是时间与效率。

而p5.js提供了一种仅需少量代码就能实现很炫酷的操作的方法。

两者渲染速度比较，理论上应该是一样的，毕竟大家殊途同归嘛，都是通过js来实现的，只要纯js写的足够优化，是会比p5.js快一丢丢的，差异不明显。

明显的差异是p5.js在网页加载时需要下载p5.js的类库才能进行操作，而canvas api由于是客户端提供的原因，则不需要。

SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

SVG： SVG是一种使用 XML 描述 2D 图形的语言。

SVG基于XML，这意味着 SVG DOM 中的每个元素都是可用的。

您可以为某个元素附加 JavaScript 事件处理器。

在SVG中，每个被绘制的图形均被视为对象。

如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas： Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。

如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

如何判断浏览器是否支持HTML5 Canvas

HTML5 Canvas的确是一个好东西，但是并不是所有浏览器都支持HTML5 Canvas的，这就要求我们在使用HTML5 Canvas前要检查浏览器是否支持这玩意儿。

在创建HTML5 canvas元素之前，首先要确保浏览器能够支持它。

如果不支持，你就要为那些古董级浏览器提供一些替代文字。

下面的代码就是检测浏览器支持情况的一种方法。

try { document.createElement("canvas").getContext("2d"); document.getElementById("support").innerHTML = "HTML5 Canvas is supported in your browser."; } catch (e) { } 上面的代码试图创建一个canvas对象，并且获取其上下文。

如果发生错误，则可以捕获错误，进而得知该浏览器不支持canvas。

页面中预先放入了ID为support的元素，通过以适当的信息更新该元素的内容，可以反映出浏览器的支持情况。

以上示例代码能判断浏览器是否支持canvas元素，但不会判断具体支持canvas的哪些特性。

这个时候，示例中使用的API已经很稳定并且各浏览器也都提供了很好的支持，所以通常不必担心这个问题。

此外，希望开发人员能够像如上代码一样为canvas元素提供备用显示内容。