1.html5 canvas 发展历史
在
canvas出来之前,开发人员要在浏览器中绘图,必须使用adobe的flash或者svg(scalable vector
graphices,可缩放矢量图形)插件。但是html5
canvas出来之后,很多动态生成或者展示图形、图表、图像或者动画的功能都由canvas来完成。同时开发人员会用svg和canvas进行比较,因
为svg在很多场合下比canvas优秀。
canvas的缺点:用canvas绘制出来的对象不属于页面dom结构或者任何命名空间
canvas的优点:
1.不需要将所有绘制的图像中的每个元素当做对象存储,因此执行性能非常好
2.canvas api可以实现其他编程语言上二维绘图api。而已使用three.js可以实现三维绘图的功能
2.canvas基本概念
<canvas></canvas>
默认创建一个宽度为300px,高度为150像素的矩形区域。通过获取上下文(context),执行一些动作,可以完成图形的绘制和动画功能。
canvas只是一个标签,后面强大的功能是通过javascript
api完成。canvas中的坐标是左上角开始,x轴沿着水平方向向右延伸,y轴沿着垂直方向向下延伸。和css中坐标体系一致。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuMDO4AzMmFGOjRTM1IGMkhjZ4kDNmBTNhNzN2AjMyEmNtQTM4QzMycDMvwlNwMTMwIzLchTM2kTNvw1ZvxmYvwVbvNmLn9GbiRXauNmLzV2Zh1Wavw1LcpDc0RHaiojIsJye.png)
处理老的浏览器不支持html5 canvas元素的问题,可以在canva标签里面添加内容,当然也可以使用modernizr 类库进行不同浏览器之间的兼容操作。
3.一个简单的canvas demo