canvas生成电波波形示例

冷不防 2024-02-20 12:30 60阅读 0赞

测试时候，用鼠标拖动滑块，向左滑动，可降低振幅，向右没滑块，则加大振幅，波形变化的速度在代码中可调节。测试请注意，要想完美看到本效果，需要你的浏览器支持HTML5 WebGL，你可以使用Google Chrome浏览器，或火狐都可以，IE就不行了。

### 效果图 ###

![在这里插入图片描述][6264ff6121ed41c2b191909ab360a4da.gif_pic_center]

### 源代码 ###

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>直接复制网</title>
       <style>
    body {
        
      background: #333;
    }
    
    canvas {
        
      display: block;
      margin: 20px auto;
    }
    
    #range {
        
      display: block;
      margin: 0 auto;
      margin-top: 20px;
      width: 400px;
    }
    
    </style>
    </head>
    <body>
      <input type="range" id="range" min="0" max="1" step="0.01" />
      <script >
    function SiriWave(opt){
        
    	this.opt = opt || {
        };
    
    	this.K = 2;
    	this.F = 6;
    	this.speed = this.opt.speed || 0.1;
    	this.noise = this.opt.noise || 0;
    	this.phase = this.opt.phase || 0;
    
    	if (!devicePixelRatio) devicePixelRatio = 1;
    	this.width = devicePixelRatio * (this.opt.width || 320);
    	this.height = devicePixelRatio * (this.opt.height || 100);
    	this.MAX = (this.height/2)-4;
    
    	this.canvas = document.createElement('canvas');
    	this.canvas.width = this.width;
    	this.canvas.height = this.height;
    	this.canvas.style.width = (this.width/devicePixelRatio)+'px';
    	this.canvas.style.height = (this.height/devicePixelRatio)+'px';
    	(this.opt.container || document.body).appendChild(this.canvas);
    	this.ctx = this.canvas.getContext('2d');
    
    	this.run = false;
    }
    
    SiriWave.prototype = {
        
    
    	_globalAttenuationFn: function(x){
        
    		return Math.pow(this.K*4/(this.K*4+Math.pow(x,4)),this.K*2);
    	},
    
    	_drawLine: function(attenuation, color, width){
        
    		this.ctx.moveTo(0,0);
    		this.ctx.beginPath();
    		this.ctx.strokeStyle = color;
    		this.ctx.lineWidth = width || 1;
    		var x, y;
    		for (var i=-this.K; i<=this.K; i+=0.01) {
        
    			x = this.width*((i+this.K)/(this.K*2));
    			y = this.height/2 + this.noise * this._globalAttenuationFn(i) * (1/attenuation) * Math.sin(this.F*i-this.phase);
    			this.ctx.lineTo(x, y);
    		}
    		this.ctx.stroke();
    	},
    
    	_clear: function(){
        
    		this.ctx.globalCompositeOperation = 'destination-out';
    		this.ctx.fillRect(0, 0, this.width, this.height);
    		this.ctx.globalCompositeOperation = 'source-over';
    	},
    
    	_draw: function(){
        
    		if (!this.run) return;
    
    		this.phase = (this.phase+this.speed)%(Math.PI*64);
    		this._clear();
    		this._drawLine(-2, 'rgba(255,255,255,0.1)');
    		this._drawLine(-6, 'rgba(255,255,255,0.2)');
    		this._drawLine(4, 'rgba(255,255,255,0.4)');
    		this._drawLine(2, 'rgba(255,255,255,0.6)');
    		this._drawLine(1, 'rgba(255,255,255,1)', 1.5);
    
    		requestAnimationFrame(this._draw.bind(this), 1000);
    	},
    
    	start: function(){
        
    		this.phase = 0;
    		this.run = true;
    		this._draw();
    	},
    
    	stop: function(){
        
    		this.run = false;
    		this._clear();
    	},
    
    	setNoise: function(v){
        
    		this.noise = Math.min(v, 1)*this.MAX;
    	},
    
    	setSpeed: function(v){
        
    		this.speed = v;
    	},
    
    	set: function(noise, speed) {
        
    		this.setNoise(noise);
    		this.setSpeed(speed);
    	}
    
    };
    
    var SW = new SiriWave({
        
      width: 640,
      height: 200
    });
    SW.setSpeed(0.4);
    SW.start();
    
    var range = document.getElementById('range');
    setInterval(function(){
        
      SW.setNoise(range.value);
    }, 0);
    
    </script>
    </body>
    </html>

[6264ff6121ed41c2b191909ab360a4da.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ed6665ad5c7846e4a251693ebba52871.png