认识canvas

一、什么是canvas

<canvas> 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。

可以理解为<canvas> 只是一个画布（创建一个可以绘制的矩形区域），本身并不具有绘图的能力，绘图必须使用 JavaScript 等脚本语言。

二、canvas的出现

在互联网出现的早期，Web 只不过是静态文本和链接的集合。自从1993年，img的出现，随后flash的诞生，以及video和audio标签的出现，人们越来越希望在其网站和应用程序中使用动态媒体，为了解决只能在 Web 页面中显示静态图片的问题，出现了 Canvas 标签。它是一个绘图表面，包含一组丰富的 JavaScript API，这些 API 使你能够动态创建和操作图像及动画。

三、canvas的特点

Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 只是一个 HTML 元素，其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控 Canvas 内单独的图形，不能对其中的具体图形进行监控。

四、canvas和其他方式画图的区别

如何在网页上画一个圆？

1.使用图片：图片首先会增加一次请求，其次是不易更改，如果想换一种颜色就需要更换图片，代价太大

2.div+css3：增加了一个没有意义的 DOM 节点，不符合语义化编程规范

3.canvas：Canvas 是基于像素的即时模式图形系统，绘制完对象后不保存对象到内存中，当再次需要这个对象时，需要重新绘制

（个人学习笔记）