SOURCE

var canvas = document.getElementById("canvas");	//根据 id 找到 canvas 元素
var cxt = canvas.getContext("2d");	//getContext() 方法返回一个用于在画布上绘图的环境
cxt.fillStyle = "#FF0000";  //填充颜色 不填充颜色默认为黑色
cxt.fillRect(0, 0, 100, 50);    //规定了形状，位置，尺寸
cxt.fillStyle = "#000000" 
cxt.fillRect(0, 0, 3, 120);


function waveFlag(canvas, wavelength, amplitude = 10, period = 200, shading = 100, squeeze = 0) {
    if (!wavelength) wavelength = canvas.width / 10;
    let fps = 30;
    let ctx = canvas.getContext('2d');
    let w = canvas.width,
        h = canvas.height;
    let od = ctx.getImageData(0, 0, w, h).data;
    return (timer = setInterval(() => {
        let id = ctx.getImageData(0, 0, w, h);
        let d = id.data;
        let now = new Date() / period;
        for (let y = 0; y < h; ++y) {
            let lastO = 0,
                shade = 0;
            let sq = (y - h / 2) * squeeze;
            for (let x = 0; x < w; ++x) {
                let px = (y * w + x) * 4;
                let pct = x / w;
                let o = Math.sin(x / wavelength - now) * amplitude * pct;
                let y2 = (y + (o + sq * pct)) << 0;
                let opx = (y2 * w + x) * 4;
                shade = (o - lastO) * shading;
                d[px] = od[opx] + shade;
                d[px + 1] = od[opx + 1] + shade;
                d[px + 2] = od[opx + 2] + shade;
                d[px + 3] = od[opx + 3];
                lastO = o;
            }
        }
        ctx.putImageData(id, 0, 0);
    }, 1000 / fps));
}
waveFlag(canvas, 5, 10, 200, 10, 0.2);

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