Canvas绘制贝塞尔曲线

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

GPU小码农

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

阅读量913

点赞数

分类专栏： HTML5 文章标签： html5游戏开发 html5 canvas

本文链接：https://blog.csdn.net/zjc_game_coder/article/details/44992665

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="test" width="1200px" height="600px" style="background-color: white"></canvas>
<script type="text/javascript">
    var c=document.getElementById("test");
    var ctx=c.getContext("2d");
    var state = 0;
    var x_ = 30;
    var y = 300;
    var r = 150;
    var ctrl_y = 90;
    setInterval("drawEnemy(x_)",200);
    function drawEnemy(x)
    {
        ctx.clearRect(0,0,1200,600);
        ctx.beginPath();
        if(state == 0)
        {
            for(var i = 0;i<5;i++)
            {
                if(i%2==0)
                {
                    x = x+r;
                    ctx.moveTo(x,y);
                    ctx.bezierCurveTo(x,y+ctrl_y,x+r,y+ctrl_y,x+r,y);
                }
                else
                {
                    x = x+r;
                    ctx.moveTo(x,y);
                    ctx.bezierCurveTo(x,y-ctrl_y,x+r,y-ctrl_y,x+r,y);
                }

            }
            state = 1;
        }
        else
        {
            for(i = 0;i<5;i++)
            {
                if(i%2!=0)
                {
                    x = x+r;
                    ctx.moveTo(x,y);
                    ctx.bezierCurveTo(x,y+ctrl_y,x+r,y+ctrl_y,x+r,y);
                }
                else
                {
                    x = x+r;
                    ctx.moveTo(x,y);
                    ctx.bezierCurveTo(x,y-ctrl_y,x+r,y-ctrl_y,x+r,y);
                }

            }
            state = 0;
        }
        ctx.stroke();
    }
</script>

</body>
</html>