从入门到小猪头

.3 canvas的绘制流程

1. 创建一个标签
2. 获取canvas元素对应的DOM对象，这是一个Canvas对象
3. 调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形
4. 调用CanvasRenderingContext2D对象的方法绘图

1.4 canvas的应用领域

canvas这个神奇的东西有很多领域可以得到应用，下面我们一起唠一唠。

1. 游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更优秀，例如这25款canvas游戏
2. 可视化的库：Echart
3. banner广告：Canvas 实现动态的广告效果非常合适
4. 图形编辑器：后续Photoshop能够100%基于Web实现
5. 微信读书、腾讯文档均是通过canvas实现

二、基础功能

通过第一章对canvas有了初步的认识，本章就按照一个人绘制一幅画的思路进行演化，逐步了解canvas的基本功能，从而更好的使用它实现一些酷炫的效果。

2.1 坐标系选择

当要绘制一幅画时首先要确定坐标系，只有选择好了坐标系之后才好动笔，在canvas中默认坐标系在左上角(X轴正方向向右、Y轴正方向向下)，可是有的时候需要变换坐标系才能更方便的实现所需的效果，此时需要变换坐标系，canvas提供了以下几种变换坐标系的方式：

1. translate(dx，dy)：平移坐标系。相当于把原来位于(0，0)位置的坐标原点平移到(dx、dy)点。
2. rotate(angle)：旋转坐标系。该方法控制坐标系统顺时针旋转angle弧度。
3. scale(sx，sy)：缩放坐标系。该方法控制坐标系统水平方向上缩放sx，垂直方向上缩放sy。
4. transform(a,b,c,d,e,f)：允许缩放、旋转、移动并倾斜当前的环境坐标系，其中a表示水平缩放、b表示水平切斜、c表示垂直切斜、d表示垂直缩放、e表示水平移动、f表示垂直移动。
5. 一只画笔在画某个美女时，忽然来了灵感需要画另一个帅哥，这个时候又不想放弃这个美女，则就需要将当前画美女的颜料、坐标等状态进行暂存，等到画完帅哥后恢复状态进行美女的绘制。在canvas中可以通过save()和restore()方法实现，调用save()方法后将这一时刻的设置放到一个暂存栈中，然后可以放心的修改上下文，在需要绘制之前的上下文时，可以调用restore()方法。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!