JavaScript动画-5（路径）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

昨天学习了怎样在2D绘图上下文中画矩形，今天学一下如何在2D绘图上下文中绘制路径~

2D绘图上下文支持很多在画布上绘制路径的方法，通过这些路径可以创建复杂的形状和线条，要绘制路径必须首先调用begin()，然后再调用以下方法：

arc(x,y,radius,startAngle,endAngle,counterclockwise):参数的含义是以坐标(x,y)为圆心，以radius为半径绘制一条弧线，起始角度为startAngle，结束角度为endAngle(均为弧度)，最后一个参数counterclockwise表示是否逆时针计算起始角度和结束角度(默认为顺时针)。
arcTo(x1,y1,x2,y2,radius):参数的含义是以给定的半径radius经(x1,y1)绘制一条到(x2,y2)的弧线。
bezierCurveTo(c1x,c1y,c2x,c2y,x,y):参数的含义是以(c1x,c1y)和(c2x,c2y)为控制点，绘制一条从上一点到(x,y)的弧线(三次贝塞尔曲线)。
lineTo(x,y):参数的含义是绘制一条从上一点到(x,y)的直线。
moveTo(x,y):不绘制线条，只是把绘制光标移动到(x,y)。
quadraticCurveTo(cx,cy,x,y):参数含义是以(cx,cy)为控制点，绘制一条从上一点到(x,y)的弧线(二次贝塞尔曲线)。
rect(x,y,width,height):参数的含义是以给定宽度和高度在坐标点(x,y)绘制一个矩形，这个方法和昨天的文章中的strokeRect()和fillRect()的区别在于它创建的是一条路径，而不是独立的图像。创建路径之后还要调用closePath()方法来绘制一条返回起点的线。如果路径已经完成，就可以通过指定fillStyle属性以及fill()方法来填充路径，也可以指定strokeStyle属性并调用stroke()方法来描绘路径，还可以调用clip()方法基于已有路径创建一个新剪切区域。下面这是一个绘制不带数字的表盘的代码：

let drawing = document.getElementById("drawing");
if(drawing.getContext){
    let context = drawing.getContext("2d");
    //创建路径
    context.beginPath();
    //绘制外圆
    context.arc(100,100,99,0,2*Math.PI,false);
    //绘制内圆
    context.moveT0(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);
    //绘制分针
    context.moveT0(100,100);
    context.lineT0(100,15);
    //绘制时针
    context.moveT0(100,100);
    context.lineT0(35,100);
    //描画路径
    context.stroke();
}

上面这个例子使用src()绘制了一个外圆和一个内圆，作为表盘的边框，要绘制完整的圆形必须从0弧度绘制到2π弧度(这里使用了数字常量Math.PI),还要注意的点是需要注意移动路径的起点，这样分别画出分针和时针。如下图所示(太懒就画一下吧，贡献上我的五金指环！)

表.jpg