canvas 曲线 弧线

本文主要是介绍canvas 曲线 弧线，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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();}

运行效果如下图：

这篇关于canvas 曲线 弧线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---