来看看干了啥事，先调用了moveTo方法移动到了(85, 35)，然后调用lineTo画了一条水平直线到(110,35)，然后调用arc方法画一个圆心为(85, 35)，半径为25，角度为(0，2PI)，顺时针（false）的圆，最后调用stroke进行描边。

注： 1、moveTo函数会将点移动到指定位置，但是不绘画路径 2、画圆的时候会以圆心向右半径的距离开始画，此时点应该在此处，否则将会从产生一个从所在点到圆心向右半径距离点的路径线（理解上右图） context.moveTo(85,35); context.lineTo(120,75); context.arc(85,35,25,0,2*Math.PI,false)

       下面我们来看看绘制路径有哪些方法，以及如何使用这些方法：

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。 arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius 穿过(x1,y1)。 bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。 lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。 moveTo(x, y)：将绘图游标移动到(x,y)，不画线。 quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。 rect(x, y, width, height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由width 和height 指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。

      要为元素绘制阴影，只需要指定以下四个属性：

shadowColor：用CSS 颜色格式表示的阴影颜色，默认为黑色。 shadowOffsetX：形状或路径x 轴方向的阴影偏移量，默认为0。 shadowOffsetY：形状或路径y 轴方向的阴影偏移量，默认为0。 shadowBlur：模糊的像素数，默认0，即不模糊。

      在绘制前为它们设置适当的值，就会产生阴 影。举个栗子：

//设置阴影 context.shadowOffsetX = -5; context.shadowOffsetY = 5; context.shadowBlur = 5; context.shadowColor = ; context.beginPath(); context.moveTo(85,35); context.lineTo(120,75); context.arc(85,35,25,0,2*Math.PI,false) context.closePath(); context.stroke();

      设置渐变的方法也很简单，调用createLinearGradient(start_x, start_y, end_x, end_y)方法，就能产生一个指定区域内的渐变，而你的图像必须和渐变坐标相符合，才能产生正确的渐变。例如：

gradient = context.createLinearGradient(140, 30, 190, 90); gradient.addColorStop(); gradient.addColorStop(); //绘制渐变矩形 context.fillStyle = gradient; context.fillRect(140, 30, 50, 50);

      除了画图外，我们可能还需要绘制一些必要的文字，Context也同样提供了两个方法：fillText()和strokeText() 和三个配置属性：font、textAlign、textBaseline。

      三个属性的说明如下：

font：表示文本样式、大小及字体，用CSS 中指定字体的格式来指定，例如。 textAlign：表示文本对齐方式。可能的值有、、、和。 textBaseline：表示文本的基线。可能的值有、、、、和

　　fillText()和strokeText()    接受字符串、x 坐标、y坐标和最大像素宽度（可选） 四个参数，举个栗子：

// 写字 context.fillStyle = ; context.font = ; context.textAlign = ; context.textBaseline = ; context.fillText(, 110, 100); //起点对齐 context.textAlign = ; context.fillText(, 110, 120); //终点对齐 context.textAlign = ; context.fillText(, 110, 140);  

      暂时先介绍到这里，下次我们就要这些学到的入门知识，实现一个帧动画试试吧！

      附上本节完整代码：