Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

时间：2021-10-11 04:06:10

绘制路径

2D上下文支持许多在画布上绘制路径的方法

通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径

然后再通过下列的方法绘制路径:

  • arc(x,y,半径,起始角度,结束角度,旋转方向):     用于绘制圆形路径,以(x,y)为圆心,旋转方向为一个bool值表示是否以逆时针方向绘制,起始角度以及结束角度的单位都是弧度
  • arcTo(x1,y1,x2,y2,半径):  　　　　                 从(x1,x2)为起点绘制一条到(x2,y2)的弧线,且该圆弧的半径为指定值
  • 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,这里绘制的是矩形路径,而不是一个独立的形状

当路径绘制完成后有几种不同的操作:

  • closePath(): 如果希望绘制一条连接到路径起点的线条则可以调用该方法
  • fill(): 用fillStyle来填充图形
  • stroke(): 对路径描边
  • clip(): 在路径上创建一个剪切区域

例如如果我们希望在canvas中绘制一个时钟,可以使用以下代码:

var drawing  = document.getElementById("drawing");

// 确定浏览器对canvas的支持

if(drawing.getContext){

    var context = drawing.getContext("2d");

    // 开始路径

    context.beginPath();

    // 绘制外圆

    context.arc(100,100,99,0,2*Math.PI,false);

    // 绘制内圆

    context.moveTo(194,100);

    context.arc(100,100,94,0,2*Math.PI,false);

    // 绘制分针

    context.moveTo(100,100);

    context.lineTo(100,15);

    // 绘制时针

    context.moveTo(100,100);

    context.lineTo(35,100);

    // 描边路径

    context.stroke();

}

为了方便我们对路径的控制, 2D上下文还提供了一个方法

isPointInPath(x,y)  该方法用于判断(x,y)是否位于路径上,在路径关闭前有效

相关文章