Partager un code d'effet de vague réalisé en HTML5

J'ai brièvement parlé de Canvas en HTML plus tôt. Cette fois, j'ai complété "l'effet de vague" (vagues montantes) basé sur Canvas.

(O(∩_∩)O hahaha~ Auteur, je peux regarder cette animation tout l'après-midi)

Rising Water Wave.gif

• Analyse d'animation
  Composition : Courbe de Bézier
  Toile : Toile
  Effet : Vague descendante (montante, fluctuante)
  Déclencheur condition : Cliquez sur le bouton

Courbe de Bézier.gif

Mise en œuvre de l'algorithme analyse : à partir de la fonction sin(), plus le sin() est grand, plus la fluctuation de l'onde est grande. En termes simples, l'animation de l'effet de vague est réalisée en changeant constamment la valeur sin()

Commençons :

1. Créer des conditions de déclenchement (boutons)

<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 Créer un canevas

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

3. paramètres de propriété)

//获取画布
 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;

4. Dessiner la courbe de Bézier

   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();
    };

Ce morceau de code a terminé le dessin de la courbe

statiquede Bézier, qui peut être résolu en résolvant Ouvrez l'instruction suivante et essayez de l'exécuter pour voir l'effet.
var y = -Math.sin((sinX+x)*waveWidth);
points.push([x,rand+y*waveHeight]);
var y = -Math.sin((sinX+x)*waveWidth+xofspeed);La méthode en cours d'exécution exécute drawSin()

Statique shell Searle Curve.png

5. Pour obtenir l'effet de vague

vous devez ajouter du code aux propriétés pour définir la vitesse

Plus la valeur est grande, plus vite la vitessevar speed = 0.1;
Le décalage horizontal de la vaguevar xofspeed = 0;
La hauteur de la vaguevar rand = beisizerheight;

    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);
    };

produit l'effet de vague en s'appelant pour générer différentes hauteurs. Les valeurs d'attribut définies ici peuvent être comprises avec la quatrième étape de dessin de la courbe de Bézier.

Méthode d'exécution rendY();

Résumé

Les courbes de Bézier peuvent également créer des ondes sonores, des moniteurs de fréquence cardiaque, etc. Vous pouvez essayer de modifier la valeur de la fréquence pour y parvenir.

[Recommandations associées]

1.

Tutoriel vidéo en ligne h5 gratuit

2.

Manuel de la version complète HTML5.

3.

Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!