一、简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其 […]
html5
HTML5之Canvas（二）——画曲线quadraticCurveTo、bezierCurveTo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script> var ctx = canvas.getContext( "2d" ); // 获取画笔 ctx.beginPath(); ctx.lineWidth = 2; // 粗细 ctx.strokeStyle = 'rgb( 200, 200, 200 )'; // 颜色 ctx.moveTo( 100, 100 ); ctx.lineTo( 200, 200 ); ctx.lineTo( 100, 200 ); ctx.lineTo( 100, 100 ); ctx.stroke(); ctx.beginPath(); // 设置画笔属性 ctx.lineWidth = 2; // 粗细 ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色 // void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y); ctx.moveTo( 100, 100 ); // 起始点 // 二次贝塞尔曲线 // 控制点 结尾点 ctx.quadraticCurveTo( 200, 200, 100, 200 ); // 渲染 ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 2; // 粗细 ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色 ctx.moveTo( 400, 200 ); // 起始点 // void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y); // 三次贝塞尔曲线 // 第一控制点 第二控制点 结束点 ctx.bezierCurveTo( 600, 200, 600, 400, 400, 400 ); ctx.stroke(); </script> </body> </html> |
测试连接
HTML5之Canvas（二）——画曲线arc、arcTo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script> var ctx = canvas.getContext( "2d" ); // 获取画笔 // 设置画笔属性 ctx.lineWidth = 2; ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 线颜色 ctx.fillStyle = 'rgba( 255, 0, 0, 0.5 )'; // 填充颜色 // void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise); // 圆心X 圆心Y 半径 起始点 结束点 顺/逆时针 ctx.arc( 300, 300, 200, 0, Math.PI * 2 / 4, 1 ); ctx.fill(); // 填充 // void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius); ctx.moveTo( 400, 100 ); ctx.arcTo( 700, 100, 600, 200, 50 ); ctx.stroke(); // 滑线 </script> </body> </html> |
测试连接 参考：http:// […]
HTML5之Canvas（一）——画起来
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas"></canvas> <script> var ctx = canvas.getContext( "2d" ); // 获取画笔 // 画图 ctx.moveTo( 10, 10 ); ctx.lineTo( 110, 10 ); ctx.lineTo( 110, 110 ); ctx.lineTo( 10, 110 ); ctx.lineTo( 10, 10 ); ctx.moveTo( 150, 10 ); ctx.lineTo( 150, 100 ); // 设置画笔属性 ctx.lineWidth = 10; // 粗细 ctx.lineJoin = 'round'; // lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角） ctx.lineCap = 'round'; //即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方） ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色 // ctx.closePath(); // 闭合路径 // 渲染 ctx.stroke(); </script> </body> </html> |
[crayon-5e2e2f62da5064 […]
HTML5之Audio（七）—— processor绘制波形图
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Audio</title> </head> <body> VOL:<input type="range" min="0" max="100" value="100" id="volume" /> <br/> L<input type="range" min="0" max="200" value="100" id="equalizer" />R <br/> <canvas id="canvas" width="1000" height="500"></canvas> <script> var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性 context = new AudioContext, // 创建Audio上下文 audio = new Audio( '茜拉 - 想你的夜.mp3' ), media = context.createMediaElementSource( audio ), // 从元素创建媒体节点 lGain = context.createGain(), // 左声道 rGain = context.createGain(), // 右声道 splitter = context.createChannelSplitter(2), // 分离器 merger = context.createChannelMerger(2), // 合成器 processor = context.createScriptProcessor( 4096, 1, 1 ), width = canvas.width, height = canvas.height, g = canvas.getContext("2d"), // canvas vol = 100, // 音量 lVol = 100, // 左声道 rVol = 100 // 右声道 ; /* → lGain media → splitter → merger → destination → rGain */ lGain.gain.value = 1; rGain.gain.value = 1; g.translate( 0.5, height / 2 + 0.5 ); media.connect( splitter ); splitter.connect( lGain, 0 ); splitter.connect( rGain, 1 ); lGain.connect( merger, 0, 0 ); rGain.connect( merger, 0, 1 ); merger.connect( processor ); processor.connect( context.destination ); //控制节点的过程处理 processor.onaudioprocess=function(e){ //获取输入和输出的数据缓冲区 var input = e.inputBuffer.getChannelData(0); var output = e.outputBuffer.getChannelData(0); //将输入数缓冲复制到输出缓冲上 for( var i = 0; i < input.length; i++ ) output[i] = input[i]; //将缓冲区的数据绘制到Canvas上 g.clearRect( -0.5, -height / 2 - 0.5, width, height ); g.beginPath(); for(var i = 0; i < width; i++ ) { g.lineTo( i, height / 2 * output[ output.length * i / width | 0 ] ); } g.stroke(); }; //音量控制 onloadvol = volume.onchange = function() { vol = volume.value; setVolume(); }; // 声道控制 onloadequ = equalizer.onchange = function() { lVol = equalizer.value > 100 ? 100 : equalizer.value; rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value ); setVolume() } // 设置音量 function setVolume() { lGain.gain.value = lVol / 100 * vol / 100; rGain.gain.value = rVol / 100 * vol / 100; } audio.play(); //播放 </script> </body> </html> |
测试连接
HTML5之Audio（六）—— 3D音效
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Audio</title> </head> <body> VOL:<input type="range" min="0" max="100" value="100" id="volume" /> <br/> L<input type="range" min="0" max="200" value="100" id="equalizer" />R <script> var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性 context = new AudioContext, // 创建Audio上下文 audio = new Audio( '茜拉 - 想你的夜.mp3' ), media = context.createMediaElementSource( audio ), // 从元素创建媒体节点 lGain = context.createGain(), // 左声道 rGain = context.createGain(), // 右声道 splitter = context.createChannelSplitter(2), // 分离器 merger = context.createChannelMerger(2), // 合成器 panner = context.createPanner(), // 声像处理器 vol = 100, // 音量 lVol = 100, // 左声道 rVol = 100 // 右声道 ; /* → lGain media → splitter → merger → panner → destination → rGain */ lGain.gain.value = 1; rGain.gain.value = 1; panner.setOrientation( 0, 1, 0 ); //方向朝向收听者 var a = 0, r = 8; setInterval( function() { //然声源绕着收听者以8的半径旋转 panner.setPosition( Math.sin( a / 100 ) * r , 0, Math.cos (a / 100 ) * r ); a++; }, 16 ); media.connect( splitter ); splitter.connect( lGain, 0 ); splitter.connect( rGain, 1 ); lGain.connect( merger, 0, 0 ); rGain.connect( merger, 0, 1 ); merger.connect( panner ); panner.connect( context.destination ); //音量控制 onloadvol = volume.onchange = function() { vol = volume.value; setVolume(); }; // 声道控制 onloadequ = equalizer.onchange = function() { lVol = equalizer.value > 100 ? 100 : equalizer.value; rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value ); setVolume() } // 设置音量 function setVolume() { lGain.gain.value = lVol / 100 * vol / 100; rGain.gain.value = rVol / 100 * vol / 100; } audio.play(); //播放 </script> </body> </html> |
[crayon-5e2e2f6 […]
HTML5之Audio（五）—— 声音过滤
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Audio</title> </head> <body> VOL:<input type="range" min="0" max="100" value="100" id="volume" /> <br/> L<input type="range" min="0" max="200" value="100" id="equalizer" />R <br/> filter:<input type="range" min="0" max="5000" value="1000" id="frequency" /> <script> var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性 context = new AudioContext, // 创建Audio上下文 audio = new Audio( '茜拉 - 想你的夜.mp3' ), media = context.createMediaElementSource( audio ), // 从元素创建媒体节点 lGain = context.createGain(), // 左声道 rGain = context.createGain(), // 右声道 splitter = context.createChannelSplitter(2), // 分离器 merger = context.createChannelMerger(2), // 合成器 filter = context.createBiquadFilter(), // 过滤器 vol = 100, // 音量 lVol = 100, // 左声道 rVol = 100 // 右声道 ; /* → lGain media → splitter → merger → filter → destination → rGain */ lGain.gain.value = 1; rGain.gain.value = 1; filter.type = filter.LOWPASS; // 设置过滤类型 // filter.frequency.value = 800; // 只允许小于800的频率通过 media.connect( splitter ); splitter.connect( lGain, 0 ); splitter.connect( rGain, 1 ); lGain.connect( merger, 0, 0 ); rGain.connect( merger, 0, 1 ); merger.connect( filter ); filter.connect( context.destination ); // 过滤控制 onloadfrequency = frequency.onchange = function() { filter.frequency.value = frequency.value; // 动态设置过滤器 console.log( frequency.value ); } //音量控制 onloadvol = volume.onchange = function() { vol = volume.value; setVolume(); }; // 声道控制 onloadequ = equalizer.onchange = function() { lVol = equalizer.value > 100 ? 100 : equalizer.value; rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value ); setVolume() } // 设置音量 function setVolume() { lGain.gain.value = lVol / 100 * vol / 100; rGain.gain.value = rVol / 100 * vol / 100; } audio.play(); //播放 </script> </body> </html> |
[crayon-5e2e2f6 […]
HTML5之Audio（四）—— 左右声道
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Audio</title> </head> <body> VOL:<input type="range" min="0" max="100" value="100" id="volume" /> <br/> L<input type="range" min="0" max="200" value="100" id="equalizer" />R <script> var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性 context = new AudioContext, // 创建Audio上下文 audio = new Audio( '茜拉 - 想你的夜.mp3' ), media = context.createMediaElementSource( audio ), // 从元素创建媒体节点 lGain = context.createGain(), // 左声道 rGain = context.createGain(), // 右声道 splitter = context.createChannelSplitter(2), // 分离器 merger = context.createChannelMerger(2), // 合成器 vol = 100, // 音量 lVol = 100, // 左声道 rVol = 100 // 右声道 ; /* → lGain media → splitter → merger → destination → rGain */ lGain.gain.value = 1; rGain.gain.value = 1; media.connect( splitter ); splitter.connect( lGain, 0 ); splitter.connect( rGain, 1 ); lGain.connect( merger, 0, 0 ); rGain.connect( merger, 0, 1 ); merger.connect( context.destination ); //音量控制 onloadvol = volume.onchange = function() { vol = volume.value; setVolume(); }; // 声道控制 onloadequ = equalizer.onchange = function() { lVol = equalizer.value > 100 ? 100 : equalizer.value; rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value ); setVolume() } // 设置音量 function setVolume() { lGain.gain.value = lVol / 100 * vol / 100; rGain.gain.value = rVol / 100 * vol / 100; } audio.play(); //播放 </script> </body> </html> |
[crayon-5e2e2f6 […]
HTML5之Audio（三）—— gain调节音量
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Audio</title> </head> <body> <input type="range" min="0" max="100" id="volume" /> <script> var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性 context = new AudioContext, // 创建Audio上下文 audio = new Audio( '茜拉 - 想你的夜.mp3' ), media = context.createMediaElementSource( audio ) // 从元素创建媒体节点 ; var gain = context.createGain(); gain.gain.value = 0.5; //连接：media→gain→destination media.connect ( gain ); gain.connect( context.destination ); //音量控制 volume.onchange = function(){ gain.gain.value = volume.value / 100; }; //播放 audio.play(); //播放 </script> </body> </html> |
[crayon-5e2e2f6 […]
HTML5之Audio（二）—— processor调节音量
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Audio</title> </head> <body> <input type="range" min="0" max="200" id="volume" /> <script> var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性 context = new AudioContext, // 创建Audio上下文 audio = new Audio( '茜拉 - 想你的夜.mp3' ), media = context.createMediaElementSource( audio ), // 从元素创建媒体节点 processor = context.createScriptProcessor( 4096, 1, 1 ) //创建脚本处理节点 ; //连接：media→processor→destination media.connect( processor ); processor.connect( context.destination ); //处理过程 processor.onaudioprocess = function( e ) { // 过程: // input ---> 处理放大音量 ---> output var input = e.inputBuffer.getChannelData( 0 ); // 输入数据缓冲区 var output = e.outputBuffer.getChannelData( 0 ); // 输出数据缓冲区 // 处理放大音量 for( var i = 0; i < input.length; i++ ) { output[i] = input[i] * value; } }; var value = 0.5; // 添加事件，控制音量 // value值为0-1之间 volume.onchange = function() { value = volume.value / 200; }; audio.play(); //播放 </script> </body> </html> |
[crayon-5e2e2f62db7fd6 […]
