首页 > 代码库 > canvas绘图详解-09-曲线的绘制原理

canvas绘图详解-09-曲线的绘制原理

1、首先看看绘制曲线和绘制弧的区别

技术分享

arc()是画一个标准的圆弧。

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

技术分享

官方解释是这样的

(x1,y1)是弧的起始点

(x2,y2)是弧的终止点

radius是弧的半径

但是我觉得这样解释更通俗一点

(x0,y0)是上一个线段的结束点或者moveTo的点,和(x1,y1)与(x2,y2)三个点形成一个折线,从(x0,y0)开始画弧,radius是半径,弧结束于弧与(x1,y1)和(x2,y2)两点之间线段的切点。

注意弧起始的不一定是切点,结束的时候一定是切点。

cxt.beginPath();
cxt.moveTo( x0 , y0 );
cxt.arcTo( x1 , y1 , x2 , y2 ,R);
cxt.lineWidth  = 6 ;
cxt.strokeStyle = "red";
cxt.stroke();

 

2、贝塞尔曲线的绘制(二次和三次)

技术分享

 

①二次贝塞尔曲线和arcTo很像,(x0,y0)就是这个曲线的起始点,(x2,y2)就是这个曲线的终止点,这个弧线不是标准的圆弧,曲线扭曲成什么样,由控制点(x1,y1)决定。

使用方法和arcTo一样

cxt.moveTo( x0 , y0 );
cxt.quadraticCurveTo( x1 , y1 , x2 , y2);

技术分享

下面是绘制一个月亮的代码

技术分享
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" width="800" height="800" style="display:block;border:1px solid #aaa;margin:50px auto;">
        如果浏览器不能正常显示,请更换支持canvas的浏览器
    </canvas>
    <script type="text/javascript">
        window.onload=function(){
            var canvas = document.getElementById(‘canvas‘);
            var context = canvas.getContext(‘2d‘);

            fillMoon(context , 2 ,400 ,400 ,300 ,0);
            
        }
        
        //d是控制点的横坐标值
        function fillMoon( cxt , d , x , y , R , rot ,/*optional*/fillColor){
            cxt.save();
            cxt.translate( x , y );
            cxt.rotate( rot * Math.PI / 180);
            cxt.scale( R , R );
            pathMoon( cxt , d);
            cxt.fillStyle = fillColor||"#fb5";
            cxt.fill();
            cxt.restore();
        }
        function pathMoon( cxt , d ){
            cxt.beginPath();
            cxt.arc( 0 , 0 , 1 ,0.5*Math.PI ,1.5*Math.PI ,true);
            cxt.moveTo( 0 , -1 );
            cxt.quadraticCurveTo(1.2 ,0 ,0 ,1);
            cxt.closePath();
        }
        function dis( x1 , y1 , x2 , y2){
            return Math.sqrt( (x1-x2)*(x1-x2) +(y1-y2)*(y1-y2));
        }
    </script>
</body>
</html>
View Code

②三次贝塞尔曲线比二次贝塞尔曲线多了一个控制点,可以绘制更灵活的曲线,比如波浪线,花瓣形状的曲线。

技术分享

 

使用方法

cxt.moveTo( x0 , y0 );
cxt.bezierCurveTo( x1 , y1  ,x2 , y2  ,x3 , y3);

技术分享

 

 实际上还有很多绘制曲线的数学方式,但是canvas只提供了arc()、arcTo()、quadraticCurveTo()和bezierCurveTo()这四种方式,同和曲线和线段的结合,能绘制出大部分图形来。

canvas绘图详解-09-曲线的绘制原理