bao_yanjun
bao_yj
采纳率85.7%
2019-03-14 18:49

canvas三角形动态轨迹

5

如何使用canvas画出三角形从一个点到展示出全部三角形的动态轨迹,麻烦给个简单的例子,谢谢。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • jslang 天际的海浪 2年前

    三角形的动态轨迹其实就是连续做三个直线的动态轨迹,这个代码可以改成任意多边形的动态轨迹。把p.push(p[0]);去掉就是任意折线的动态轨迹

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    </head>
    <body>
    <canvas id="canvasId" width="400" height="350"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById("canvasId");
    var ctx = canvas.getContext("2d");
    var p = [
        {x:200,y:50},
        {x:100,y:200},
        {x:300,y:200}
    ];
    p.push(p[0]);
    function go() {
        if (p.length>1)
            line(p[0],p[1]);
    }
    
    function line(p1,p2) {
        var vx = p2.x-p1.x, vy = p2.y-p1.y;
        var size = Math.max(Math.abs(vx),Math.abs(vy));
        vx /= size;
        vy /= size;
        var x = p1.x, y = p1.y;
        function run() {
            ctx.beginPath();
            ctx.moveTo(x,y);
            x += vx;
            y += vy;
            ctx.lineTo(x,y);
            ctx.stroke();
            if (--size>0) {
                setTimeout(run, 16);
            } else {
                p.shift();
                go();
            }
        }
        run();
    }
    
    go();
    
    </script>
    </body>
    </html>
    
    
    
    点赞 评论 复制链接分享
  • devmiao devmiao 2年前
    点赞 评论 复制链接分享

相关推荐