Canvas贝塞尔三级曲线

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 100 阅读

文章标签：

#javascript #ViewUI

本文演示了如何使用HTML5 Canvas的bezierCurveTo方法绘制贝塞尔曲线，并通过示例代码详细解释了各个参数的作用。

两个控制点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>bezierCurveTo</title>
</head>

<body>
    <canvas id='myCanvas' width='400' height='200'>
        your browser does not support canvas
    </canvas>
    <script type="text/javascript">
    var c = document.getElementById('myCanvas');
    var cxt = c.getContext('2d');
    cxt.beginPath();
    var sx = 20,
        sy = 100,
        cx1 = 45,
        cy1 = 70,
        cx2 = 95,
        cy2 = 130,
        ex = 120,
        ey = 100;
    cxt.moveTo(sx, sy);
    cxt.bezierCurveTo(cx1,cy1,cx2,cy2,ex,ey);
    cxt.moveTo(sx, sy);
    cxt.lineTo(cx1,cy1);
    cxt.lineTo(cx2,cy2);
    cxt.lineTo(ex,ey);
    cxt.moveTo(0, 100);
    cxt.lineTo(140, 100);
    cxt.stroke();
    </script>
</body>

</html>