Canvas 曲线绘制

xiaoxiao2021-02-28  46

Canvas 曲线绘制

Canvas 曲线绘制有四种方式:arc()、arcTo ()、quadraticCurveTo()、bezierCurveTo()。

1. arc()

context.arc ( centerx,centery ,radius ,startingAngle ,endingAngle ,anticlockwise = false) 参数: - centerx,centery:圆点坐标(x,y) - radius:半径 - startingAngle:起始弧度 - endingAngle:结束弧度 - anticlockwise:可选参数,FALSE表示顺时针,TRUE表示逆时针,默认为FALSE

2. arcTo ()

arcTo ( x1 ,y1 ,x2 ,y2 ,radius ) 传入两点的坐标以及一个圆弧的半径,( x1 ,y1)为一个控制点,(x2 ,y2)为一个终止点。 使用方法: 首先要使用moveTo(x0,y0)移动到一个初始点的位置 context.moveTo(x0,y0); 使用arcTo ()指定控制点、结束点以及半径context.arcTo(x1 ,y1 ,x2 ,y2 ,radius); arcTo ()绘图原理: arcTo()将当前点坐标,即moveTo()或lineTo()等之后所在的点坐标作为(x0 ,y0)的位置,之后开发者传入参数x1 ,y1 ,x2 ,y2后将会形成一个有两个线段组成的折线,arcTo()将从(x0 ,y0)开始绘制一条弧线,这条弧线与这两条折线相切,并且其圆弧的半径为radius。弧线的绘制起始点为(x0 ,y0),但(x0 ,y0)不一定是一个切点,它将在(x0 ,y0)和(x1 ,y1)连成的线段上寻找一个切点,找到切点后才开始绘制圆弧。但结束点不一定是(x2 ,y2),而是与(x1 ,y1)和(x2 ,y2)连成的线段相切的点。 若弧线切点不在(x0 ,y0)和(x1 ,y1)连成的线段上,而是在其延长线上,弧线将往反方向寻找切点。

3. 贝塞尔曲线(Bezier)

使用方式: 首先用moveTo()指定初始点坐标 context.moveTo(x0,y0); 使用quadraticCurveTo()指定控制点和结束点context.quadraticCurveTo(x1,y1,x2,y2); 和arcTo()不同的是(x0,y0)就是曲线的起始点,(x2,y2)就是曲线的结束点。 可以通过下面这个页面查看贝塞尔曲线的效果: http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

4. 贝塞尔三次曲线

使用方式: 首先用moveTo()指定初始点坐标context.moveTo(x0,y0); 使用bezierCurveTo()指定两个控制点和一个结束点context.bezierCurveTo(x1,y1,x2,y2,x3,y3); 可以通过下面这个页面查看贝塞尔曲线的效果: http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

转载请注明原文地址: https://www.6miu.com/read-2250130.html

最新回复(0)