canvas介绍

基础概念

canvas是HTML5的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。现在有名的echars.js库（一个基于 JavaScript 的开源可视化图表库）就是基于canvas实现的。

canvas 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

canvas元素

canvas尺寸

canvas元素有两套尺寸：

• 元素本身的大小(通过CSS设置)
• 元素绘图表面的大小(通过canvas自身的width和height属性设置)

注意：通过CSS修改width和height，只是改变了元素本身大小，对元素绘图表面的大小并无影响;而通过修改属性width和height，则会同时改变元素本身大小和绘图表面大小。

如下图：

• 

• 使用css设置画布的大小会导致画布按比例缩放你设置的值。

• 用css设置的width为450，height为300，对应默认的画布大小300×150，宽高比例分别为1.5和2，所以我们设置的矩形的宽（100px）高（100px）实现显示的会是宽：100px×1.5=150px；高：100px×2=200px；

canvas坐标系

• 

代码骨架

• getContext()：这个方法是用来获得渲染上下文和它的绘画功能。

	// Canvas 的默认大小为