Teilen Sie einen mit HTML5 erstellten Welleneffektcode

Ich habe vorhin kurz über Canvas in HTML gesprochen. Dieses Mal habe ich den „Welleneffekt“ (aufsteigende Wasserwellen) basierend auf Canvas fertiggestellt.

(O(∩_∩)O hahaha~ Autor, ich kann mir diese Animation den ganzen Nachmittag ansehen)

Rising Water Wave.gif

• Animationsanalyse
  Zusammensetzung: Bezier-Kurve
  Leinwand: Leinwand
  Effekt: Wellenabebben (steigend, schwankend)
  Auslöser Bedingung: Klicken Sie auf die Schaltfläche

Bezier-Kurve.gif

Algorithmusimplementierung Analyse: Ausgehend von der sin()Funktion gilt: Je größer sin(), desto größer die Fluktuation der Welle. Einfach ausgedrückt wird die Welleneffektanimation durch ständige Änderung des sin()-Werts realisiert

Lassen Sie uns beginnen:

1. Erstellen Sie Triggerbedingungen (Schaltflächen)

<button type="button"
        onclick="Beisizer()"//点击时触发JS事件
        onmouseover="bcd()"//鼠标经过时JS事件
        onmouseleave="out()"//鼠标离开时JS事件
        id="Anniu">确  &nbsp &nbsp  &nbsp  &nbsp  &nbsp  &nbsp &nbsp  &nbsp  &nbsp  &nbsp  定</button>

2. Erstellen Sie JS-Ereignisse ( Eigenschafteneinstellungen)

  <canvas id="Theback"></canvas>

4. Bezier-Kurve zeichnen

//获取画布
 var beisizer = document.getElementById("Theback");
 var ContenofBeisizer = beisizer.getContext("2d");

 //设置波浪海域（海浪宽度，高度）
 var beisizerwidth = beisizer.width;
 var beisizerheight = beisizer.height;
 var beisizerlinewidth = 2;

//曲线
 var sinX = 0;
 var sinY = beisizerheight/2.0;
//轴长
 var axisLenght = beisizerwidth;
//弧度宽度
 var waveWidth = 0.014;
//海浪高度
 var waveHeight = beisizerheight / 15.0;
ContenofBeisizer.lineWidth = beisizerlinewidth;

Dieser Code hat das Zeichnen einer

   var drawSin = function (xofspeed) {
        ContenofBeisizer.save();
        //存放贝塞尔曲线的各个点
        var points = [];
        ContenofBeisizer.beginPath();
        //创建贝塞尔点
        for (var x = sinX;x < sinX +axisLenght;x+=80/axisLenght){
           // var y = -Math.sin((sinX+x)*waveWidth);  测试请解开注释，注释下一行
            var y = -Math.sin((sinX+x)*waveWidth+xofspeed);

            // points.push([x,sinY + y * waveHeight]); 测试请解开注释，注释下一行
            points.push([x,rand+y*waveHeight]);      

          //  ContenofBeisizer.lineTo(x,sinY + y * waveHeight);  测试请解开注释，注释下一行
         ContenofBeisizer.lineTo(x,rand + y * waveHeight);   
        }

        ContenofBeisizer.lineTo(axisLenght,beisizerheight);
        ContenofBeisizer.lineTo(sinX,beisizerheight);
        ContenofBeisizer.lineTo(points[0][0],points[0][1]);
        ContenofBeisizer.stroke();
        ContenofBeisizer.restore();

       //贝塞尔曲线样式设置
        ContenofBeisizer.strokeStyle = "#3bc777";
        ContenofBeisizer.fillStyle = "#3bc777";
        ContenofBeisizer.fill();
    };

statischen

Bezier-Kurve abgeschlossen, die das kann durch Lösen gelöst werden. Öffnen Sie die folgende Anweisung und versuchen Sie, sie auszuführen, um den Effekt zu sehen.

var y = -Math.sin((sinX+x)*waveWidth);
points.push([x,rand+y*waveHeight]);Run-Methode führt drawSin() aus
var y = -Math.sin((sinX+x)*waveWidth+xofspeed);

Statische Shell Searle Curve.png

Um den Welleneffekt zu erzielen

müssen Sie den Eigenschaften Code hinzufügen, um die Geschwindigkeit festzulegen

Je größer der Wert, desto schneller Geschwindigkeit

Der horizontale Versatz der Wellevar speed = 0.1;
Die Höhe der Wellevar xofspeed = 0;
var rand = beisizerheight;

erzeugt den Welleneffekt, indem er sich selbst dazu aufruft, unterschiedliche Höhen zu erzeugen. Die hier festgelegten Attributwerte können zusammen mit dem vierten Schritt des Zeichnens der Bezier-Kurve verstanden werden.

    var rendY = function () {
        ContenofBeisizer.clearRect(0,0,beisizerwidth,beisizerheight);

        //控制海浪高度
        var tmp = 0.1;
        rand-=tmp;
        var b = beisizerheight - rand;

        //控制循环涨潮
        if (parseInt(b)==beisizerheight){
            rand = beisizerheight;
        }

        drawSin(xofspeed);
        drawSinl(xofspeed);
        xofspeed += speed;
        requestAnimationFrame(rendY);
    };

Laufmethode rendY();

Zusammenfassung

Bezier-Kurven können auch Schallwellen, Herzfrequenzmesser usw. erzeugen. Sie können versuchen, den Frequenzwert zu ändern, um dies zu erreichen.

[Verwandte Empfehlungen]

1.

Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen mit HTML5 erstellten Welleneffektcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!