HTML5中有两种图形解决方案：SVG和Canvas，两者都有各自特点，这里不多说，Qunee图形组件中我们常常使用SVG作为节点图标，这在大部分场景下都表现良好，但是IE下有些小问题，IE下可以将SVG图片绘制到Canvas上，但是无法读取SVG的像素信息，这意味着一些特殊功能（追踪图片边缘，图片染色等）无法被实现，这时候我们考虑选择将SVG解析，转换成Canvas的绘制代码，这样就可以使用Canvas来绘制SVG图片了 项目代码：https://github.com/samsha/svg2canvas canvg.js 是的确实有人在做这样的事，canvg.js 就是一个将SVG转换成Canvas的工具库，甚至有些SVG的动画效 …

原文：http://www.html5rocks.com/en/tutorials/canvas/inspection/ 翻译：blog.qunee.com 介绍 不管你是使用2D 还是WebGL，任何用过的人都知道很难调试，使用Canvas通常需要长长的难以跟踪的调用列表 function draw() { context.clearRect(0, 0, 258, 258); context.fillStyle = “#EEEEEE”; context.beginPath(); context.arc(129, 129, 127, 0, 6.28, true); context.closePath(); …

js运行效率在提升 编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java. Canvas绘制效率不低 Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的 适合简单应用 因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便 …

HTML5中的2D图形绘制技术 Canvas和SVG是HTML5中主要的2D图形技术，前者提供画布标签和绘制API，后者是一整套独立的矢量图形语言，成为W3C标准已经有十多年(2003.1至今)，总的来说，Canvas技术较新，从很小众发展到广泛接受，注重栅格图像处理，SVG则历史悠久，很早就成为国际标准，复杂，发展缓慢（Adobe SVG Viewer近十年没有大的更新） Canvas vs SVG 和都是HTML5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …