canvas重点及吃豆人

# canvas

## 前端中使用到的绘图技术

1. 实时的走势图

2. 统计图表

3. 验证 随机内容的图片

4. 在线画板

5. HTML5在线游戏

## canvas技术

绘制2d图像  位图/像素图

webGL

- 画布原点(0,0)   在画布的左上角的顶点

## 绘制线条

- moveTo  起点

- lineTo  下一个点

- stroke  对绘制的路径描边

- fill    对绘制的路径填充

- colsePath  闭合当前绘制路径

- lineWidth  线条宽度

- fillStyle 填充区域颜色

- strokeStyle 描边颜色

## 线端样式

- lineCap  

  - butt  默认样式

  - aquare  延长

  - round  圆化

- lineJoin  两线相交时的样式

  - round

  - bevel  

  - miter

## 绘制矩形

- strokeRect(x,y,w,h)

- fillRect(x,y,w,h)

- rect(x,y,w,h)

## 阴影设置

- shadowColor 阴影颜色

- shadowBlur  阴影模糊大小

- shadowOffsetX  x轴偏移量

- shadowOffsetY  y轴偏移量

## 圆弧

- arc(x,y,r,起始角度,结束角度,方向)

## 圆角矩形

- moveTo(100,100);

- arcTo(100,200,200,200,10)

##