HTML5中canvas的二次曲线用法

最新推荐文章于 2022-03-08 10:06:06 发布

sxjlinux

最新推荐文章于 2022-03-08 10:06:06 发布

阅读量596

点赞数

本文链接：https://blog.csdn.net/sunxiaoju/article/details/49945009

版权

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
            canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            context.moveTo(50, 50);
            context.bezierCurveTo(50, 50,200,200,300,50);//绘制曲线，它是由三个坐标点组成，各个坐标点之间会绘制一个弧度
            /*
             bezierCurveTo(p1x,p1y,p2x,p2y,x,y)
             p1x:第一个控制点x坐标
             p1y:第一个控制点y坐标
             p2x:第二个控制点x坐标
             p2y:第二个控制点y坐标
             x:终点x坐标
             y:终点y坐标
             */
            context.stroke();
            context.quadraticCurveTo(300, 0, 400,0);//绘制二次曲线，它是由两个坐标点组成的曲线
            /*
            qpx1:二次曲线控制点x坐标
            qpy1:二次样条曲线控制点y坐标
            x:二次样条曲线终点x坐标
            y:二次样条曲线终点y坐标
            */
            context.stroke();
        }
    </script>
</head>
<body οnlοad="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

效果图如下所示：