码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas贝塞尔三级曲线

时间:2015-07-22 12:25:36      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

两个控制点

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

 

Canvas贝塞尔三级曲线

标签:

原文地址:http://www.cnblogs.com/stono/p/4666952.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!