Share a wave effect code made using HTML5

I briefly talked about Canvas in HTML before. This time I completed the "wave effect" (water waves rising) based on Canvas.

（O(∩_∩)O hahaha~ Author I can watch this animation all afternoon)

Rising water wave.gif

• Animation analysis
  Composition: Bezier curve
  Canvas: Canvas
  Effect: wave rising (rising, fluctuation)
  Trigger condition: Click the button

#Bezier curve.gif

Algorithm implementation analysis: Starting from the sin()
function, the larger the sin(), the greater the fluctuation of the wave. Simply put, the wave effect animation is realized by continuously changing the sin() value

Let’s get started:

1. Create trigger conditions (buttons)

<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. Create canvas

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

3. Create JS events (property settings)

//获取画布
 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. Draw Bezier curve

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

This code has completed the drawing of

static Bezier curve. You can try to run it by untying the following statement to see the effect. .
var y = -Math.sin((sinX+x)*waveWidth);
points.push([x,rand+y*waveHeight]);
var y = -Math.sin((sinX+x)*waveWidth+xofspeed);Run the method to execute drawSin()

Static Bezier curve.png

5. To achieve the wave effect

You need to add some code to the properties to set the rate

var speed = 0.1; The larger the value, the faster the speed.
var xofspeed = 0; The lateral offset of the wave
var rand = beisizerheight;Wave height

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

Call itself to generate different heights to produce a wave effect. The attribute values ​​set here can be understood together with the fourth step of drawing the Bezier curve.

Running method rendY();

Summary

Bezier curves can also be used to create sound waves, heartbeat monitors, etc. You can try changing the frequency value to achieve this.

【Related recommendations】

1.

Free h5 online video tutorial

2.

HTML5 full version manual

3.

php.cn original html5 video tutorial

The above is the detailed content of Share a wave effect code made using HTML5. For more information, please follow other related articles on the PHP Chinese website!