canvas简单使用

canvas元素的api类似于:

• MFC里面绘制图形的API，同样是在一块区域中绘制图形，同样可以绘制动画图形，不过canvas实现动画比MFC简单很多。

• 同时也类似于openGL里面的API，也是绘制计算机图形，什么绘制区域上下文(2d/3d), 填充fill，什么样式style，笔刷stroke，清除clear都是类似的

canvas元素：

• <canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，
• <canvas> 标签只有两个属性—— width和height.
• 当没有设置宽度和高度的时候，canvas会初始化为宽度为300像素和高度为150像素。
• <canvas>元素可以像任何一个普通的图像一样（有margin，border，background等等属性）被设计。但是这些样式不会影响在canvas中的实际图像
• 解决兼容性，只需在<canvas>标签中提供替换内容。支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。

绘制矩形

var canvas = document.getElementById("canvas");var context = canvas.getContext('2d');context.fillRect(10,10,90,90);fillRect(x, y, width, height)