html5使用canvas 的lineTo方法绘制折线并实现小球运动轨迹

最新推荐文章于 2024-03-22 16:17:37 发布

她定有过人之处_cherish

最新推荐文章于 2024-03-22 16:17:37 发布

阅读量1.8k

点赞数 1

文章标签： html5 html 前端

本文链接：https://blog.csdn.net/wxcsdn1997/article/details/122412663

版权

上次使用了canvas 的bezierCurveTo方法绘制曲线并实现小球运动轨迹。

现在研究一下lineto怎么做到小球运动轨迹。（当然还没有研究 bezierCurveTo 是否可以绘制直线，之后有空在研究）

先附上效果图：

小球从黄色起点位置开始运动，慢慢运动到粉色线上，超出粉色线后，小球恢复起始位置重新开始。

附上代码：

说明 xDis yDis 黄色线上的计算公式因为设计线条时正好设置的是底为300 高为400 斜边为500的直角三角形（完美运用勾股定理）

因此高和底的比例是4/3 因此保证这个比例那么点肯定就在黄色边上

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        .father {
            position: relative;
            height: 1080px;
            width: 1920px;
        }
        
        .canvas {
            height: 1080px;
            width: 1920px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .pointcanvas {
            height: 1080px;
            width: 1920px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div align="center" class="father">
        <canvas class="canvas" id="canvas"></canvas>
        <canvas class="pointcanvas" id="point"></canvas>
    </div>

    <script>
        let _t = 0.03;
        let _a = 0;
        let _b = 0;
        var c = document.getElementById("canvas");

        var ctx = c.getContext("2d");
        c.width = 1920;
        c.height = 1080;
        ctx.beginPath();
        ctx.moveTo(0, 410);
        ctx.lineTo(300, 10);
        ctx.strokeStyle = "yellow";
        ctx.lineWidth = 2;
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(300, 10);
        ctx.lineTo(500, 10);
        ctx.strokeStyle = "pink";
        ctx.lineWidth = 2;
        ctx.stroke();

        setInterval('drawOneMoment()', 60);



        //绘制某一时刻的点
        function drawPoint(ctx, text, textcolor) {


            let xDis = _t * 10 * _a;
            let yDis = 410 - _t * 10 * _a * (4 / 3);
            console.log(xDis, yDis)

            if (xDis < 300) {
                ctx.beginPath();
                //画小圆点
                ctx.moveTo(0, 410);
                ctx.arc(xDis, yDis, 4, 0, 2 * Math.PI, false);
                ctx.fillStyle = "#e95b55";
                ctx.fill();
                ctx.closePath();
            } else if (xDis >= 300 && xDis < 540) {
                ctx.beginPath();
                //画小圆点
                ctx.moveTo(300, 10);
                let xDis = 300 + _t * 10 * _b;
                ctx.arc(xDis, 10, 4, 0, 2 * Math.PI, false);
                ctx.fillStyle = "#e95b55";
                ctx.fill();
                ctx.closePath();
                _b += 5;
            } else {
                _a = 0;
                _b = 0;
                _t = 0.03;
                xDis = 0;
                yDis = 410;
            }
        }


        //绘制某一时刻的点，连续绘制形成动图
        function drawOneMoment() {
            let pointCanvas = document.getElementById("point");
            let ctx = pointCanvas.getContext("2d");
            pointCanvas.width = 1920;
            pointCanvas.height = 1080;
            //清除画布
            ctx.clearRect(0, 0, 1920, 1080);
            //逐个绘点
            drawPoint(ctx, "", '#0c79d0')
            _a += 6
        }
    </script>
</body>

</html>

她定有过人之处_cherish

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html5使用canvas 的lineTo方法绘制折线并实现小球运动轨迹

上次使用了canvas 的bezierCurveTo方法绘制曲线并实现小球运动轨迹。现在研究一下lineto怎么做到小球运动轨迹。（当然还没有研究 bezierCurveTo 是否可以绘制直线，之后有空在研究）先附上效果图：小球从黄色起点位置开始运动，慢慢运动到粉色线上，超出粉色线后，小球恢复起始位置重新开始。附上代码：说明 xDis yDis 黄色线上的计算公式因为设计线条时正好设置的是底为300 高为400 斜边为500的直角三...
复制链接

扫一扫