html5中canvas繪製貝塞爾曲線

cherishSpring發表於2016-07-27
HTMLCanvas
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas繪製貝塞爾曲線</title>
    </head>
    <body>
        <canvas id="myCanvas" width="700" height="700"></canvas>
        
        <!--
            繪製貝塞爾曲線
            context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
            cp1x:第一個控制點x座標
            cp1y:第一個控制點y座標
            cp2x:第二個控制點x座標
            cp2y:第二個控制點y座標
            x:終點x座標
            y:終點y座標
            
            繪製二次樣條曲線
            context.quadraticCurveTo(qcpx,qcpy,qx,qy)
            qcpx:二次樣條曲線控制點x座標
            qcpy:二次樣條曲線控制點y座標
            qx:二次樣條曲線終點x座標
            qy:二次樣條曲線終點y座標
        -->
        <script type="text/javascript">
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            
            context.moveTo(50,50);
            context.bezierCurveTo(50,50,150,50,150,150);
            context.stroke();
            context.quadraticCurveTo(150,250,250,250);
            context.stroke();
        </script>
    </body>
</html>

相關文章