HTML5（六）canvas 矩形、路径、画板功能

一.绘制矩形

1.什么是canvas

• canvas标签相当于一个画板；
• canvas的宽高不要用css去定义，直接在标签中用属性写；

2. obj = c.getContext('2d');

• 获得2d绘画环境（相当于铺了一层画布）
• 绘画图像的操作都会在obj这个绘画环境中存储；

3. 绘画方法及样式

x,y为坐标

• 样例：

二.canvas路径

1.方法

2. 样例

cv.lineJoin = 'round';//边界类型为弧形

三.画板功能效果（鼠标绘画）

1.基本功能

mousedown事件设置起点

mousemove加鼠标移动事件（注意：鼠标位置要相对于canvas画板定位，所以要加上position属性）

鼠标抬起事件

2.补充功能

根据选项设置线条颜色，粗细

橡皮擦功能

四.画布控制(旋转，平移，缩放）