要在画布上绘制一条曲线,可以使用arc方法或者arcTo方法,但这些弧有一条半径相同的曲线。要绘制一些非同心圆的曲线,则要采用贝塞尔曲线。其中要用到2个方法quadraticCurveTo或者 bezierCurveTo。这2个方法都是用来画贝塞尔曲线,差别是一个是二次,一个是三次而已。

  • 二次曲线是一条抛物线,因此是一条弧,可能是不对称的,只有一个拐点。

    context.quadraticCurveTo(cpx,cpy,end_x,end_y);

    其中,cpx和cpy定义了控制点的坐标,控制点控制了曲率;end_x和end_y定义了结束点的坐标。起点用moveTo来确定。

  • 三次贝塞尔曲线有2个控制点,向相反方向拉伸.

    context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

​ (cp1x,cp1y),(cp2x, cp2y)定义了2个控制点, (x, y)定义了结束点。起点用moveTo来确定。

这两种贝塞尔曲线都使用控制点将直线操纵成曲线;二次贝塞尔曲线只有一个控制点,这意味着沿着这条直线只有一条曲线;三次贝塞尔曲线
有两个控制点,这意味着沿一条直线有两条曲线。下面图形给出了一个解释,实际上就是拉伸:

画二次曲线的代码示例:

<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
        window.onload=(function(){
            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");
            ctx.lineWidth = 6;
            ctx.strokeStyle = "#333999";
            ctx.beginPath();
            ctx.moveTo(100, 250); //曲线起点
            ctx.quadraticCurveTo(250, 100, 400, 250);
            ctx.stroke();
        });
</script>
</head>
<body>
    <canvas id="canvas" width=500 height=500></canvas>
</body>
</html>

效果:

二次曲线

三次曲线代码示例:

<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
        window.onload=(function(){
            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");
            ctx.lineWidth = 6;
            ctx.strokeStyle = "#999666";
            ctx.beginPath();
            ctx.moveTo(100, 200); //曲线起点
            ctx.bezierCurveTo(100, 100, 200, 200, 200, 100);
            ctx.stroke();
        });
</script>
</head>
<body>
    <canvas id="canvas" width=500 height=500></canvas>
</body>
</html>

效果:

三次曲线

渝ICP备20006974号-2