HTML5画布实现方法：

Posted 2020-07-09 空间机器

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