一、canvas基础介绍
HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.
Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。
但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。
如果开发者需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制。
1.canvas 能够做什么？
- 基础图形的绘制
- 文字的绘制
- 图形的变形和图片的合成
- 图片和视频的处理
- 动画的实现
- 小游戏的制作
2.基础用法
1 获取 canvas 元素对应的 DOM 对象，这必须是一个 canvas 对象
2 调用 canvas 对象的 getContext( ) 方法,该方法返回一个 canvasRenderingContext2D 对象，对象可以绘制图形。
3 调用 canvasRenderingContext2D 对象的方法进行绘图。
二、canvas画布的API
1.样式设置 fillStyle | strokeStyle
指设置将要绘制图案的填充或边的样式
| 属性 | 描述 |
|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| color | 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。 |
| gradient | 用于填充绘图的渐变对象（线性或放射性） |
| pattern | 用于创建 pattern 笔触的 pattern 对象 |
| fill() | 填充当前绘图（路径） |
| stroke() | 绘制已定义的路径 |
2.形状设置
| 方法 | 描述 |
|---|
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
(1)矩形
属性值：
| 参数 | 描述 |
|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
(2)圆形
属性值：
| 参数 | 描述 |
|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计 |
| eAngle | 结束角，以弧度计。 |
