Appearance
CANVAS 使用手册
前言： 讲解 CANVAS 的 DEVICE_API 使用
CANVAS 的介绍
CANVAS 是 W3C 推出的基于 JS 画图的 DEVICE_API ,可以用来实现 2 位的基本图像绘制， 并结合这些基本的画图 DEVICE_API 实现你所需要的复杂图形效果，可以用在 HTML5 的游戏制作， 图表绘制等多方面。
基本的使用步骤
- 在 HTML 标签中引入 CANVAS 元素
- 在 JS 脚本中获取 CANVAS 对象。
- 使用 CANVAS 对象中的方法绘制你所需要的图像 请参见范例 1
属性参考
再导入 canvas 标签后，该标签不同于 HTML 其他元素标签，只有 width 和 height 两个标签属性， 其余属性都是可选的，在不设置宽和高的情况下，默认为宽300px高150px,采用获取元素 ID 的方式可以得到 会返回 HTMLCanvasElement 的控制句柄，句柄包含以下方法和属性。
| widtd | CANVAS 标签的宽度 |
| height | CANVAS 标签的高度 |
| getContext('2d') | 获取 context 对象，这个对象上拥有绘图的 DEVICE_API,以后 W3C 可能会更改为 3d 的获取 |
| toDataURL() | 将 CANVAS 对象转换为数据 URL,(不理解dataurl参看DataURL定义） |
画图 DEVICE_API
可以把画图风格分为填充和轮廓两种方式此时就含有 fiilStyle 和 strokeStyle 两种风格 整个画图对象是在调用 HTMLCanvasElement.getContext('2d') 获取的 CanvasRenderingContext2D 对象所有的属性和方法如下表
| 全局属性 | |
| canvas | canvas 标签对象的引用 |
| globalAlpha | 决定整个 CANVAS 对象的透明度 |
| globalCompositeOperation | 用来确定图像堆叠规则 |
| strokeStyle | 存储素描对象的绘画特征默认为黑色 |
| fillStyle | 存储填充对象的绘画特征默认为黑色 | 变换属性 |
| scale (x,y) | x,y 表示横纵轴扩张系数 |
| rotate (angle) | 逆时针旋转 angle 度 |
| translate (x, y) | 平移向量 （x,y） |
| transform (a, b, c, d, e, f) | 二维平面变换矩阵 |
| setTransform (a, b, c, d, e, f) | 回到初始的坐标系状态 | 颜色和风格 |
| strokeStyle | 轮廓的颜色 |
| fillStyle | 填充的颜色 |
| createLinearGradient (x0, y0, x1, y1) and addColorStop (pos, color) | 线性渐变颜色 |
| createRadialGradient (x0, y0, r0, x1, y1, r1) and addColorStop (pos, color) | 圆形渐变 |
| createPattern (image, repetition) | 图像填充模式 |
填充画图
画图步骤
1.选择填充颜色 fillStyle 支持 CSS 颜色选择包括 16进制、字符串、rgb和rgba 的模式，但是都是以字符串的格式赋值 同时也支持渐变的对象，和图像模式三种方式。 strokeStyle 为笔画的描边颜色方法和上面相同。不支持图像模式。 2.确定颜色后就可以绘制图形了 直接使用