波浪形摆动幅度动画

代码语言:html

所属分类:视觉差异

代码描述:波浪形摆动幅度动画

代码标签: 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en" class="">
<head>
    <meta charset="UTF-8">


    <style>
        body {
            overflow: hidden;
            background-color: #000;
        }
    </style>

</head>
<body>
    <canvas id="c" width="707" height="362"></canvas>

    <script>
        let ctx = c.getContext("2d");
        let cw = c.width = window.innerWidth;
        let ch = c.height = window.innerHeight;

        let w = 7;
        let H = 25;
        let arrowLength = 100;
        let rid = null;

        class Arrow {
            constructor(pos, a, n) {
                this.pos = pos;
                this.a = a;
                this.n = n;
            }

            draw() {
                let h = H * Math.cos(this.a);
                ctx.save();
                ctx.translate(this.pos.x, this.pos.y);
                //line
                ctx.globalCompositeOperation = "destination-over";
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(0, arrowLength);
                ctx.strokeStyle = this.n % 2 == 0 ? "coral": "Cyan";
                ctx.stroke();

                if (this.n % 2 == 0) {
                    ctx.globalCompositeOperation = "source-over";
                    ctx.strokeStyle = "#ddd";
                    ctx.lineCap = "round";
                    //arrow 1
                    ctx.beginPath();
                    ctx.moveTo(-w, h);
                    ctx.lineTo(0,.........完整代码请登录后点击上方下载按钮下载查看

网友评论0