上篇通过对canvas 画对角线，了解了一些canvas画图基本原理。现在可以利用HTML5 canvas API创建一个场景：带有长跑跑道的树林。
安宁网站建设公司成都创新互联公司,安宁网站设计制作，有大型网站制作公司丰富经验。已为安宁1000+提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的安宁做网站的公司定做！
原理还是与上篇画对角线一样，只是步骤增多而已，先看代码：
DEMO效果如下：
上面的代码中有一个特殊的函数叫做closePath。这个函数的行为同lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形己经闭合或者形成了完全封闭的区域。
为了使树冠更加形象并且看起来像真的树，不得不利用canvas 的API绘制其图形外观，代码如下：
DEMO效果见下面运行效果：
lineJoin属性设置为round，这是修改当前形状中线段的连接方式，让拐角变得更加油；也可以把lineJoin属性设置成bevel或者miter来变换拐角样式。
strokeStyle属性是为了改变线条颜色。
fillStyle属性是为了设置填充颜色
context 的fill 函数是为了可以让canvas对当前图形中所有的闭合路径内部的像素点进行填充，配合fillStyle 填充内部像形点颜色。
创建树干有两种方法：
在这里我们使用fillRect 来构建树干。代码如下：
效果DEMO如下：
与fillRect相关的函数还有：strokeRect和clearRect。strokeRect的作用是基于给出的位置和坐标画出矩形的轮廓，clearRect的作用是清除矩形区域内的所有内容并将它恢复到初始状态，即透明。
完成本篇最后一个功能，在小树旁边画上一个跑道。代码如下：
quadraticCurveTo函数绘制曲线的起点是当前坐标，带有两组(x,y)参数。第二组是指曲线的终点。第一组代表控制点。所谓的控制点位于曲线的旁边，其作用相当于对曲线产生一个拉力。通过高速控制点的位置，就可以改变曲线的曲率。在右上方再画一条一样的曲线，以形成一条路。DEMO效果如下：
与quadraticCureTo函数一样的曲线功能还涉及：bezierCurveTo、arcTo和arc函数。这些函数通过多种控制点（如半径、角度和等）让曲线更具可塑性。
本文参考自：pro HTML5 Programming.