未加星标

JavaScript声波 JavaScript

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

JavaScript声波 JavaScript
<meta charset="utf8" />
<meta content="width=device-width, minimum-scale=1.0, maximum-scale=2.0 initial-scale=1.0, user-scalable=yes" name="viewport" />
<meta content="acoustic wave propagation" name="keywords" />
<meta content="声波传播,能量不断衰减,从而导致振幅先增大后减小,最终归零" name="description" />
<title></title>
<style type="text/css">
body { color: white; background-color: #333; font-size: 16px;}controlDiv { margin: 40px auto;}label { /* 变为block之后后面的元素才会换行排列 */ display: block;}input[type=range] { display: block;}#canvas { display: block; margin: 0 auto;}</style>
<div id="controlDiv"><label id="attenuationCoefficientLabel">衰减系数: 2</label> <label>(越大, 边缘衰减的就越多, 震动宽度相应也越窄)</label> <input id="attenuationCoefficientRange" max="10" min="1" step="1" type="range" value="2" /> <label id="halfWaveCountLabel">半波长个数-1: 3</label> <input id="halfWaveCountRange" max="10" min="0" step="1" type="range" value="3" /> <label id="amplitudePercentageLabel">振幅: 3%</label> <input id="amplitudePercentageRange" max="100" min="0" step="1" type="range" value="90" /> <label id="radianStepLabel">角速度: 0.05</label> <label>(速度开始从右到左,先加快后减慢,最后变成左到右)</label> <input id="radianStepRange" max="3.15" min="0" step="0.01" type="range" value="0.05" /></div>
<canvas id="canvas">Your browser can not support canvas</canvas> <script>var doublePI = Math.PI * 2;var canvas;var ctx;//画布的高度的一半var halfCanvasHeight = 100;//水平边距var horizontalMargin = 150; //衰减系数(越大, 边缘衰减的就越多, 震动宽度相应也越窄)var attenuationCoefficient = 2;//半波长个数-1var halfWaveCount = 3;//振幅是画布高度的一般的百分比[0,1]var amplitudePercentage = 0.9;//每帧增加的弧度[0,2PI](作用于sin曲线, 正值相当于原点右移, 曲线左移)var radianStep = 0.05;//当前弧度的偏移var radianOffset = 0;//画布宽度var canvasWidth;function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); var attenuationCoefficientLabel = document.getElementById("attenuationCoefficientLabel"); var attenuationCoefficientRange = document.getElementById("attenuationCoefficientRange"); var halfWaveCountLabel = document.getElementById("halfWaveCountLabel"); var halfWaveCountRange = document.getElementById("halfWaveCountRange"); var amplitudePercentageRangeLabel = document.getElementById("amplitudePercentageRangeLabel"); var amplitudePercentageRangeRange = document.getElementById("amplitudePercentageRangeRange"); var radianStepLabel = document.getElementById("radianStepLabel"); var radianStepRange = document.getElementById("radianStepRange"); attenuationCoefficientRange.addEventListener("change", function() { attenuationCoefficient = parseInt(event.target.value); attenuationCoefficientLabel.innerHTML = "衰减系数AC: " + attenuationCoefficient; }); halfWaveCountRange.addEventListener("change", function() { halfWaveCount = parseInt(event.target.value); halfWaveCountLabel.innerHTML = "半波长个数-1: " + halfWaveCount; }); amplitudePercentageRange.addEventListener("change", function() { amplitudePercentage = parseInt(event.target.value) / 100; amplitudePercentageLabel.innerHTML = "振幅: " + event.target.value + "%"; }); radianStepRange.addEventListener("change", function() { radianStep = parseFloat(event.target.value); radianStepLabel.innerHTML = "角速度: " + radianStep; }); window.addEventListener("resize", onResize); canvas.height = halfCanvasHeight * 2; onResize(); loop();}function onResize() { //元素的大小不能加单位, 单位默认就是像素, 而style中的长度要加单位 canvasWidth = canvas.width = window.innerWidth - horizontalMargin;}//设K=attenuationCoefficient, 计算信号衰减 (4K/(4K+x^4))^2K<=1 (x belong [-K,K])function calcAttenuation(x) { return Math.pow(4 * attenuationCoefficient / (4 * attenuationCoefficient + Math.pow(x, 4)), 2 * attenuationCoefficient);}//heightPercentage为振幅的显示比例function drawAcousticWave(heightPercentage, alpha, lineWidth) { ctx.strokeStyle = "white"; ctx.globalAlpha = alpha; ctx.lineWidth = lineWidth || 1; ctx.beginPath(); ctx.moveTo(0, halfCanvasHeight); var x,y; for(var i=-attenuationCoefficient; i<=attenuationCoefficient; i+=0.01) { //i是当前位置相对于整个长度的比率( x=width*(i+K)/(2*K)) x = canvasWidth * (i + attenuationCoefficient) / (2 * attenuationCoefficient); //加offset相当于把sin曲线向右平移 y = halfCanvasHeight + halfCanvasHeight * amplitudePercentage * calcAttenuation(i) * heightPercentage * Math.sin(halfWaveCount * i + radianOffset); ctx.lineTo(x, y); } ctx.stroke();}function loop() { radianOffset = (radianOffset + radianStep) % doublePI; ctx.clearRect(0, 0, canvas.width, canvas.height); drawAcousticWave(1, 1, 2); for(var i=2; i<4; i++) { var reciprocal = 1 / i; drawAcousticWave(reciprocal, reciprocal/2); drawAcousticWave(-reciprocal, reciprocal/2); } requestAnimationFrame(loop);}init();
</script>
JavaScript声波 JavaScript

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptHTML
分页:12
转载请注明
本文标题:JavaScript声波 JavaScript
本站链接:http://www.codesec.net/view/531078.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(27)