我还记得在过去的Web前端开发中，如果你需要绘制或者生成相关图形，使用Flash可能是你或者最强大的实现方式，而在HTML5这个近年来比较热门的技术中，HTML Canvas可以帮助你更方便的实现2D绘制图形和各种动画效果。

首先我们先来了解一下什么是HTML Canvas？

我们可以使用宽度和高度属性来定义HTML中的画布。而Canvas的相关功能主要依靠Javascript实现，即HTML5 Canvas API。我们使用javascript来访问和控制Canvas相关的区域，比如调用相关的绘制方法，来动态生成需要的动画或图形。

接下来我们来看看canvas的特性：

交互性：Canvas支持交互，能很好的响应用户的操作。我们可以通过Javascript监控键盘、鼠标和触摸设备相关事件。

动图：画布画的任何图形都可以动画化，简单的弹跳球或者复杂的HTML5游戏都可以实现

灵活性：开发人员可以使用Canvas绘制任何内容，如线条、图形、文本、图片等。有或没有动画。同时，可以添加音频或视频浏览器支持：几乎所有现代浏览器都支持它，并且有多种设备支持，如台式机、平板电脑、智能手机等。

人气：canvas目前很流行，很多开发者都用它来开发类似的游戏或者绘图应用

Web标准：你只需要一个浏览器来运行，不需要flash或者silverlight，你需要安装相关的插件

一旦开发出来，任何浏览器都可以运行(当然，不包括旧的浏览器)

可以使用大量的免费开发工具及其类库。

使用HTML5 Canvas我们能开发那些相关产品或者应用呢？

1可视化数据：各种统计图表，如：百度的echart

场景展示：使用Canvas实现动态广告效果，跨平台和谐运行。比如：手机中的微产品，在移动端兼容性很好。

游戏三：画布在基于Web的图像显示上比Flash更有立体感和细腻感，画布已经成为HTML5游戏开发的。目前h5玩游戏，但是商业模式不是很清楚。25.的HTML5 Canvas游戏。

4其他可以嵌入网站的内容(多用于活动页面和):像图表、音频、视频等，有很多元素可以更好的与Web集成，不需要任何插件。

5趋势=模拟器：模拟器产品在视觉效果和核心功能上完全可以用JavaScript实现。模拟真实的硬件环境，比如各种类型的手机。

6 Trend=远程电脑控制：Canvas使开发人员能够更好地实现基于Web的数据传输，构建完善的可视化控制界面。

7趋势=图形编辑器：Photoshop图形编辑器基于Web就能实现。

如何使用HTML5 Canvas？

其实使用HTML5画布很简单，每个画布都有上下文。使用它，可以调用相关的canvas方法。

canvas id=' my canvas ' width=' 500 ' height=' 400 '

p您的浏览器不支持HTML5画布/p

/canvas

在上面的代码中，我们给HTML添加了一个画布标签。如果浏览器不支持canvas，会显示P标签的内容。当然，如果需要支持老浏览器，也可以用flash或者其他方法做一个替代方案。

var canvas=document . getelementbyid(' my canvas ')，

context=canvas . GetContext(' 2d ')；

通过上面的代码，我们可以通过画布获得2D的背景。

在HTML5 Canvas的2D结构中，坐标(0，0)在左上角，与传统坐标不同。大家需要注意，如下图所示：

下面来说一下canvas的API：

canvas的主要属性和方法：

Save():保存当前环境的状态

Restore():返回以前保存的路径状态和属性

createEvent()

GetContext():返回一个对象，该对象指示访问绘图功能所需的应用编程接口

ToDateURL():返回画布图像的网址

颜色、样式和阴影属性和方法：

FillStyle:设置或返回用于填充绘画的颜色、渐变或模式

StrokeStyle:设置或返回用于笔画的颜色、渐变或模式

阴影颜色：设置或返回阴影使用的颜色

阴影模糊：设置或返回用于阴影的模糊等级

ShadowOffsetX:设置或返回阴影与形状的水平距离

阴影偏移量：设置或返回阴影与形状的垂直距离

创建线性渐变():创建线性渐变(用于画布内容)

CreatePattern():在指定的方向上重复指定的元素

CreateRadialGradient():创建径向/圆形渐变(用于画布内容)

AddColorStop():指定渐变对象中的颜色和停止位置

线条样式属性和方法

LineCap:设置或返回线条的端点样式

LineJoin:设置或返回两条线相交时创建的角的类型。

线宽：设置或返回当前线段宽度

MiterLimit:设置或返回更大斜接长度

Canvas的API-路径方法

填充():填充当前图形(路径)

Stroke():绘制定义的路径

开始一个路径，或者重置当前路径

MoveTo():将路径移动到画布中的指定点，而不创建线条

ClosePath():创建从当前点到起点的路径

LineTo():添加一个新点，并从该点到最后一个指定点创建一条线

Clip():从原始画布上剪切任何形状和大小的区域

四次曲线创建一条二次贝塞尔曲线

贝塞尔曲线():创建三次贝塞尔曲线

弧():创建弧/曲线(用于创建圆或圆的一部分)

ArcTo():在两条切线之间创建圆弧/曲线

如果指定点在当前路径中，则返回布尔值

Canvas的API-转换方法

缩放():将当前图形缩放到更大或更小

旋转():旋转当前图形

Translate():重新映射画布上的(0，0)位置

变换():替换图形的当前变换矩阵

SetTransform():将当前转换重置为单位矩阵，然后运行Transform()

Canvas的API-文本属性和方法

Font:设置或返回文本内容的当前字体属性

文本对齐：设置或返回文本内容的当前对齐方式

文本基线：设置或返回绘制文本时使用的当前文本基线。

FillText():在画布上绘制“填充”文本

在画布上绘制文本(无填充)

MeasureText():返回包含指定文本宽度的对象

Canvas的API-图像绘制方法

DrawImage():在画布上绘制图像、画布或视频

画布像素操作方法和属性

宽度：返回图像数据对象的宽度

Height:返回图像数据对象的高度

数据：返回包含指定图像数据对象的图像数据的对象

创建图像数据():创建一个新的空白图像数据对象

GetImageData():返回一个ImageData对象，该对象复制画布上指定矩形的像素数据

PutImageData():将图像数据(来自指定的ImageData对象)放回画布上

Canvas的API-图像合成属性

全局Alpha:设置或返回绘图的当前Alpha或透明值

全局组合操作：设置或返回新图像在现有图像上的绘制方式。

快速高效的创建HTML5画布图形？

使用Canvas直接绘制图形比较枯燥和麻烦，所以我们在现代HTML5 Canvas中使用了一些现成的第三方类库来帮助我们实现快速、经济地绘制图形的功能：

KineticJS

Paper.js

图形动画

Fabric.js

oCanvas

Echart.js