关闭

HTML5中canvas的二次曲线用法

173人阅读 评论(0) 收藏 举报
<!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 onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

效果图如下所示:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:141509次
    • 积分:1855
    • 等级:
    • 排名:千里之外
    • 原创:78篇
    • 转载:36篇
    • 译文:0篇
    • 评论:14条
    最新评论