Question

HTML5的canvas绘图和CSS3的绘图哪个更有优越性

如题，最好能从多个方面比较，能说下区别，二者的原理。

Answer 1

简单解释一下：

1. CSS更像是把多个“矩形”（div）裁剪后，然后拼接成一个图案，然后给图案上色。

2. Canvas由点开始，延长无数个点，得到线，延长线之后得到一个面（三角形，圆形，矩形等等的图案面），然后给线或者面描边，上色。

3. CSS目前更像是小朋友的手工课，Canvas更像是用一支笔画图，不过画出来的图更加像能够控制大小的矢量图片。

下图简单说明

在面对曲线和更复杂图形的时候，Canvas比CSS更有办法。另外Canvas确定坐标位置的时候更加贴近我们常用到的数学思维方法。

只能显浅说说。

Answer 2

Canvas是HTML5中的重要组成部分，用于绘制简单的图形，定义路径，创建渐变及应用图像变换84它是依赖分辨率的位图画布，其绘制的图形是不可缩放的，开发者可以通过JavaScript在canvas上面绘制任意图形，甚至加载图片628

Answer 3

css哪能绘什么图(至少目前为止不能)，最多能弄点渐变背景，透明度，阴影什么的，那都不算绘图。用css控制div什么的生成拼n多1px的色块来拼像素图也不能叫绘图..

html5的canvas名义叫html5的，实际上主要是跟javascript编程打交道，理论上如果掌握好了你可以画任意图案，而且可以实时或动态的改变绘图内容。

追问

css 可以的哦，能画很多东西，腾讯那只企鹅都能用css 画出来，问下原理。。

追答

你说那个就是用div来形成小色块拼像素图(结合点css渐变、圆角什么的)，没任何技术含量，会点css只要耐心好都能拼出来，见我第一段回答：
用css控制div什么的生成拼n多1px的色块来拼像素图也不能叫绘图..

你说这个根本没生成图形像素或者矢量点，严格的说不能叫绘图，Canvas绘图是真正的产生一块画布区域，在上面生成图像，生成的图像是可以保存成图片的，css画QQ头像那种你存不成图片的。而且没有任何技术上的实用价值。

Canvas结合js的话强大得多，你可以弄出类似photoshop的曲线工具之类的东西，上面的曲线是绘制出来的，而且可以实时调整。

打个通俗的比方：真正的画家画的油画是艺术，一般人是画不出那个水平的。但是十字绣(就像你说得css拼QQ头像图案)，随便谁学学，只要有耐心就能弄出来。

Answer 4

两者都不向下兼容！即IE6等一些老浏览器都不支持。