码迷,mamicode.com
首页 > Web开发 > 详细

HTML5画布实现方法:

时间:2016-05-21 14:23:26      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

我们可以在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绘制很多类型的图形,包括了直线,曲线,路径,形状,文字等等;

 

HTML5画布实现方法:

标签:

原文地址:http://www.cnblogs.com/liaolei1/p/5514587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!