学步园

canvas 画曲线 弧线说明

创建弧线

arc() 方法创建弧/曲线（用于创建圆或部分圆）。
           
语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数：x,y 园的中心的坐标，r 园的半径
           sAngle 起始角 弧度记，eAngle 结束角,
           counterclockwise 规定是顺时针还是逆时针画图，false 顺时针，true 逆时针
  图形说明：

var mycanvas = document.getElementById("mycanvas");
            if (mycanvas == null) {
                return false;
            }
            var context = mycanvas.getContext("2d");
            context.beginPath();
            context.arc(150, 150, 120, 0, 1.5 * Math.PI, false);//顺时针
            context.stroke();
            context.closePath();

            context.beginPath();
            context.arc(300, 150, 120, 2 * Math.PI, 0 * Math.PI, true);//逆时针
            context.stroke();
            context.closePath();

创建曲线

arcTo 创建两切线之间的弧/曲线
           
语法：context.arcTo(x1,y1,x2,y2,r);
 参数：x1,y1曲线的第一个控制点，x2,y2 曲线的第二个控制点，曲线的半径
 说明：arcTo其实是通过起点，第1点，第2点的两条直线，组成了一个夹角，而这两条线，也是参数圆的切线。
              其中圆的半径决定了圆会在什么位置与线条发生切边。就像一个球往一个死角里面滚，球越小就滚得越进去，越靠近死角；球大则反之。

 var mycanvas = document.getElementById("mycanvas");
            if (mycanvas == null) {
                return false;
            }
            var context = mycanvas.getContext("2d");
            context.beginPath();
            context.strokeStyle = "blue";
            context.lineWidth = 5;
            context.moveTo(220, 300);
            context.arcTo(400, 300, 330, 430, 60);
            context.stroke();
            context.closePath();

            context.beginPath();
            context.strokeStyle = "green";
            context.lineWidth = 3;
            context.moveTo(220, 300);
            context.lineTo(400, 300);
            context.lineTo(330, 430);
            context.fillText("x1,y1", 410, 300);
            context.fillText("x2,y2", 330, 440);
            context.stroke();
            context.closePath();

裁剪图形

clip() 方法从原始画布中剪切任意形状和尺寸。
语法：context.clip();
说明：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，
并在以后的任意时间对其进行恢复（通过 restore() 方法）。

 var mycanvas = document.getElementById("mycanvas");
            if (mycanvas == null) {
                return false;
            }
            var context = mycanvas.getContext("2d");
            context.beginPath();
            context.strokeStyle = "blue";
            context.rect(460, 10, 200, 200);
            context.stroke();
            context.clip();
            context.closePath();

            context.fillStyle = "green";
            context.fillRect(400, 10, 300, 100);

判断一个点是否在某条线上

isPointInPath 判断一个点是否在某个线路上，
语法：context.isPointInPath(x,y)
参数：x,y测试点的x,y坐标

 var mycanvas = document.getElementById("mycanvas");
            if (mycanvas == null) {
                return false;
            }
            var context = mycanvas.getContext("2d");
            context.rect(10, 300, 120, 120);
            if (context.isPointInPath(10, 320)) {
                context.stroke();
            }

运行效果如下图：