html5 canvas-绘制贝塞尔曲线

最新推荐文章于 2024-06-24 16:44:45 发布

weixin_30907523

最新推荐文章于 2024-06-24 16:44:45 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/hack-ing/p/6250679.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');

        oGC.moveTo(100,200);
        oGC.arcTo(100,100,300,200,50);

        oGC.stroke();
    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>

第2中写法

    window.οnlοad=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');

        oGC.moveTo(100,200);
        /*oGC.arcTo(100,100,300,200,50);*/

        oGC.quadraticCurveTo(100,100,200,100);

        oGC.stroke();
    }

第3中写法

    window.οnlοad=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');

        oGC.moveTo(100,200);
        /*oGC.arcTo(100,100,300,200,50);*/

        /*oGC.quadraticCurveTo(100,100,200,100);*/

        oGC.bezierCurveTo(100,100,200,200,200,100);

        oGC.stroke();
    }