HTML5学习—Canvas API入门-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

HTML5学习—Canvas API入门

简介:

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中坐标体系一致。

image

处理老的浏览器不支持HTML5 Canvas元素的问题,可以在canva标签里面添加内容,当然也可以使用Modernizr 类库进行不同浏览器之间的兼容操作。


3.一个简单的Canvas Demo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: