Loading

Canvas贝塞尔三级曲线

两个控制点

<!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>

 

posted @ 2015-07-22 11:54  stono  阅读(326)  评论(0)  编辑  收藏  举报