HTML5画布实现方法:
我们可以在HTML中使用属性width和height来定义Canvas。但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API。我们使用javascript来访问和控制Canvas相关的区域,比如调用相关绘图的方法,用来动态的生成需要的动画或者图形。
Html5 引入了一个新的 <canvas> 标签,这个标签所代表的区域就好象一块画布,所有图形绘制最后都要在这块画布上呈现。
<canvas id="tutorial" width="150" height="150" style=""> <p>如果看到这行字,就说明你的浏览器不支持canvas标签</p> </canvas>
注意:如果你在HTML中不指定宽度和高度,缺省的高度是300px,宽度是150px。
HTML5 Canvas拥有很多超酷的特性:
1. 互动性:Canvas支持互动,可以很好的响应用户的操作,我们可以通过Javascript来监听键盘,鼠标,及其触摸设备相关事件。
2. 动画:任何被canvas绘制的图形都可以添加动画,简单的弹跳球或者复杂的HTML5游戏都可以实现
3.灵活性:开发人员可以使用Canvas来绘制任何的内容,比如,直线,图形,文字,图片等等,可以包含动画或者不包含。同时你可以添加音频或者视频
4.浏览器支持:几乎所有的现代浏览器都支持,并且被广泛的各种设备支持,例如,桌面,平板,智能手机等等。
5.流行度:canvas目前很流行,很多的开发人员都使用它来开发类似游戏或者绘图类应用
6.web标准:只需要有浏览器就可以运行,而非flash或者silverlight,需要安装相关的插件
7.开发一次,任何浏览器都可以运行(当然,不包括老式浏览器)
8.使用免费拥有大量的开发工具及其类库
使用HTML CANVAS:
用HTML5 canvas其实非常简单, 每一个canvas都拥有一个上下文(context)。使用它你可以来调用相关的画布方法。
其中,2D类型的图形需要调用2D context,3D的需要调用3D图形相关的context(这个通常我们叫webgl)。
1. getContext('2d');取到2D的context。你使用jQuery,那么可以使用如下代码取得context:$("#mycanvas")[0].getContext('2d');
2.使用HTML5 Canvas绘制很多类型的图形,包括了直线,曲线,路径,形状,文字等等;
最新文章
- 获取layer.open弹出层的返回值
- go 版本 gRPC 环境搭建(3.0正式版)
- Python学习笔记——文件操作
- [转] 请别再拿“String s = new String(";xyz";);创建了多少个String实例”来面试了吧
- HDU 5489 Removed Interval (LIS变形)
- MIPI D-PHY 总结
- C#远程获取/读取网页内容
- Gradle之恋-任务1
- Python数据模型及Pythonic编程
- Oracle使用
- 克拉美罗界(CRB)
- [转]Laravel - Where null and Where not null eloquent query example
- tomcat的systemctl启动脚本
- 【ES】学习4-结构化搜索
- ORA-30926: 无法在源表中获得一组稳定的行ORA-06512: 在 ";STG.FP_MO_SPLIT";, line 1562 临时
- [Animations] 快速上手 iOS10 属性动画
- web.xml 中的listener、filter、servlet 加载顺序及其【配置详解】
- CSS Spritec下载,精灵图,雪碧图,初探之原理、使用
- Java 7 新增功能
- Linux-HUP信号的干扰问题