HTML5 —— canvas画布，新手学前端开发

3. 准备画笔：context对象(画笔)，也称为绘制环境，使用该对象在画布中绘制图形 getContext('2d')

4. 绘图：

(1)绘制线条：

初始位置、连线端点(终点)、描边(画线)

2d平面坐标系：画布的左上角是坐标原点(0,0),从原点开始向右延伸是x轴增大,向下延伸是y轴增大

(2)画线过程：

• 确定初始位置(起始点)：moveTo(x,y)

• 确定连接端点(终点)：lineTo(x,y)

• 描边：stroke()

(3)线条的样式：

• 线宽：lineWidth ='数值' ,默认以像素为单位

• 描边的颜色(线条颜色): strokeStyle = '颜色名或16进制颜色值'

• 端点的形状：lineCap = '形状'

butt ： 默认值，无端点形状，显示的是直线的方形边缘

round：圆形端点

square：方形端点

(4)线的路径：在同一个画布中添加再多的连线端点路径只有一条

• 开始新的路径：beginPath()

• 闭合路径：closePath()

• 路径填充：fill()

例子：

二、 圆的绘制

========================================================================

arc(x,y,r,开始角,结束角,方向)

| 参数 | 内容 |

| — | — |

| x,y | 圆心的坐标 |

| r | 圆的半径 |

| 开始角 | 开始的圆周率角度 |

| 结束角 | 结束的圆周率角度 |

| 方向 | 绘图方向(顺时针、逆时针)，true表示逆时针，false表示顺时针(默认) |

示例：

var canvas = document.getElementById(‘cavs’);

var context = canvas.getContext(‘2d’);

context.arc(150,80,50,0,2.0*Math.PI,false)

context.stroke()

三、 绘制火柴人

=========================================================================

代码：