分类目录归档：html5

HTML5之FILE API

2014年7月6日 chen

一、简介

HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其功能，可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览，或者允许应用程序在用户离线时保存文件引用。另外，您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配，或者限制上传内容的大小。

该规范通过“本地”文件系统提供了多种文件访问接口：

File – 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。
FileList – File 对象的类数组序列（考虑 <input type=”file” multiple> 或者从桌面拖动目录或文件）。
Blob – 可将文件分割为字节范围。

二、FILELIST

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>File Api</title>
</head>
<body>
    <input type="file" name="myFile" id="myFile" multiple >
    <script>
        myFile.addEventListener( 'change', function( e ) {
            // 可以通过这2中方法获取 filelist，查看已经选取的文件
            console.log( this.files );
            console.log( e.target.files );
        }, false );
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

myFile.addEventListener( 'change', function( e ) {

// 可以通过这2中方法获取 filelist，查看已经选取的文件

console.log( this.files );

console.log( e.target.files );

}, false );

</script>

</body>

</html>

可以看到，此时已经获取了上传文件的基本信息（名称、大小、mime类型等）。

三、FileReader

通过FileList获取到文件引用后，我们就可以使用FileReader来读取文件内容。

FileReader有4个方法来获取文件

FileReader.readAsBinaryString(Blob|File) – result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。
FileReader.readAsText(Blob|File, opt_encoding) – result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。
FileReader.readAsDataURL(Blob|File) – result 属性将包含编码为数据网址的 file/blob 数据。
FileReader.readAsArrayBuffer(Blob|File) – result 属性将包含ArrayBuffer 对象形式的 file/blob 数据。

下面我们使用readAsText来读取txt文本内容。

myFile.addEventListener( 'change', function( e ) {
            var reader = new FileReader();
            reader.readAsText( e.target.files[0] );
            console.log( reader );
        }, false );

myFile.addEventListener( 'change', function( e ) {

var reader = new FileReader();

reader.readAsText( e.target.files[0] );

console.log( reader );

}, false );

读取后，FileReader的result属性为文件内容。

canvas、html5

HTML5之Canvas（二）——画曲线quadraticCurveTo、bezierCurveTo

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

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>

测试连接

canvas、html5

HTML5之Canvas（二）——画曲线arc、arcTo

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

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://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE6%EF%BC%9A%E7%94%BB%E6%9B%B2%E7%BA%BF%E4%B9%8Barcto/

canvas、html5

HTML5之Canvas（一）——画起来

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

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>

interface CanvasElement : Element {
               attribute unsigned long width;
               attribute unsigned long height;

      DOMString toDataURL(optional in DOMString type, in any... args);

      Object getContext(in DOMString contextId);
    };

interface CanvasElement : Element {

attribute unsigned long width;

attribute unsigned long height;

DOMString toDataURL(optional in DOMString type, in any... args);

Object getContext(in DOMString contextId);

};

interface CanvasRenderingContext2D {

          // back-reference to the canvas readonly attribute HTMLCanvasElement canvas;

          // state void save(); // push state on state stack void restore(); // pop state stack and restore state

          // transformations (default transform is the identity matrix)
          void scale(in float x, in float y);
          void rotate(in float angle);
          void translate(in float x, in float y);
          void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
          void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

          // compositing attribute float globalAlpha; // (default 1.0)
                   attribute DOMString globalCompositeOperation; // (default source-over)

          // colors and styles attribute any strokeStyle; // (default black)
                   attribute any fillStyle; // (default black)
          CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
          CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
          CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
          CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
          CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

          // line caps/joins attribute float lineWidth; // (default 1)
                   attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
                   attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
                   attribute float miterLimit; // (default 10)

          // shadows attribute float shadowOffsetX; // (default 0)
                   attribute float shadowOffsetY; // (default 0)
                   attribute float shadowBlur; // (default 0)
                   attribute DOMString shadowColor; // (default transparent black)

          // rects void clearRect(in float x, in float y, in float w, in float h);
          void fillRect(in float x, in float y, in float w, in float h);
          void strokeRect(in float x, in float y, in float w, in float h);

          // path API void beginPath();
          void closePath();
          void moveTo(in float x, in float y);
          void lineTo(in float x, in float y);
          void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
          void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
          void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
          void rect(in float x, in float y, in float w, in float h);
          void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
          void fill();
          void stroke();
          void clip();
          boolean isPointInPath(in float x, in float y);

          // text attribute DOMString font; // (default 10px sans-serif)
                   attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
                   attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
          void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);
          void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);
          TextMetrics measureText(in DOMString text);

          // drawing images void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);
          void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
          void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);
          void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
          void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);
          void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

          // pixel manipulation
          ImageData createImageData(in float sw, in float sh);
          ImageData createImageData(in ImageData imagedata);
          ImageData getImageData(in float sx, in float sy, in float sw, in float sh);
          void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
        };

        interface CanvasGradient {
          // opaque object void addColorStop(in float offset, in DOMString color);
        };

        interface CanvasPattern {
          // opaque object
        };

        interface TextMetrics {
          readonly attribute float width;
        };

        interface ImageData {
          readonly attribute unsigned long width;
          readonly attribute unsigned long height;
          readonly attribute CanvasPixelArray data;
        };

        interface CanvasPixelArray {
          readonly attribute unsigned long length;
          getter octet (in unsigned long index);
          setter void (in unsigned long index, in octet value);
        };

interface CanvasRenderingContext2D {

// back-reference to the canvas readonly attribute HTMLCanvasElement canvas;

// state void save(); // push state on state stack void restore(); // pop state stack and restore state

// transformations (default transform is the identity matrix)

void scale(in float x, in float y);

void rotate(in float angle);

void translate(in float x, in float y);

void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

// compositing attribute float globalAlpha; // (default 1.0)

attribute DOMString globalCompositeOperation; // (default source-over)

// colors and styles attribute any strokeStyle; // (default black)

attribute any fillStyle; // (default black)

CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);

CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);

CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);

CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

// line caps/joins attribute float lineWidth; // (default 1)

attribute DOMString lineCap; // "butt", "round", "square" (default "butt")

attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")

attribute float miterLimit; // (default 10)

// shadows attribute float shadowOffsetX; // (default 0)

attribute float shadowOffsetY; // (default 0)

attribute float shadowBlur; // (default 0)

attribute DOMString shadowColor; // (default transparent black)

// rects void clearRect(in float x, in float y, in float w, in float h);

void fillRect(in float x, in float y, in float w, in float h);

void strokeRect(in float x, in float y, in float w, in float h);

// path API void beginPath();

void closePath();

void moveTo(in float x, in float y);

void lineTo(in float x, in float y);

void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

void rect(in float x, in float y, in float w, in float h);

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

void fill();

void stroke();

void clip();

boolean isPointInPath(in float x, in float y);

// text attribute DOMString font; // (default 10px sans-serif)

attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")

attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")

void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);

void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);

TextMetrics measureText(in DOMString text);

// drawing images void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);

void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);

void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);

void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

// pixel manipulation

ImageData createImageData(in float sw, in float sh);

ImageData createImageData(in ImageData imagedata);

ImageData getImageData(in float sx, in float sy, in float sw, in float sh);

void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);

};

interface CanvasGradient {

// opaque object void addColorStop(in float offset, in DOMString color);

};

interface CanvasPattern {

// opaque object

};

interface TextMetrics {

readonly attribute float width;

};

interface ImageData {

readonly attribute unsigned long width;

readonly attribute unsigned long height;

readonly attribute CanvasPixelArray data;

};

interface CanvasPixelArray {

readonly attribute unsigned long length;

getter octet (in unsigned long index);

setter void (in unsigned long index, in octet value);

};

测试连接

参考：http://dev.w3.org/2006/canvas-api/canvas-2d-api.html

http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE%E6%95%99%E7%A8%8B2%EF%BC%9A%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E7%94%BB%E7%BA%BF%E6%9D%A1/

audio、html5

HTML5之Audio（七）—— processor绘制波形图

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<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/>

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>

测试连接

audio、html5

HTML5之Audio（六）—— 3D音效

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<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

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>

enum PanningModelType {
  "equalpower",
  "HRTF"
};

enum DistanceModelType {
  "linear",
  "inverse",
  "exponential"
};

interface PannerNode : AudioNode {

    // Default for stereo is HRTF 
    attribute PanningModelType panningModel;

    // Uses a 3D cartesian coordinate system 
    void setPosition(double x, double y, double z);
    void setOrientation(double x, double y, double z);
    void setVelocity(double x, double y, double z);

    // Distance model and attributes 
    attribute DistanceModelType distanceModel;
    attribute double refDistance;
    attribute double maxDistance;
    attribute double rolloffFactor;

    // Directional sound cone 
    attribute double coneInnerAngle;
    attribute double coneOuterAngle;
    attribute double coneOuterGain;

};

enum PanningModelType {

"equalpower",

"HRTF"

};

enum DistanceModelType {

"linear",

"inverse",

"exponential"

};

interface PannerNode : AudioNode {

// Default for stereo is HRTF

attribute PanningModelType panningModel;

// Uses a 3D cartesian coordinate system

void setPosition(double x, double y, double z);

void setOrientation(double x, double y, double z);

void setVelocity(double x, double y, double z);

// Distance model and attributes

attribute DistanceModelType distanceModel;

attribute double refDistance;

attribute double maxDistance;

attribute double rolloffFactor;

// Directional sound cone

attribute double coneInnerAngle;

attribute double coneOuterAngle;

attribute double coneOuterGain;

};

setPosition、setOrientation、setVelocity，这些方法来设置声源的位置、朝向、运动。

1	setPosition、setOrientation、setVelocity，这些方法来设置声源的位置、朝向、运动。

测试连接

audio、html5

HTML5之Audio（五）—— 声音过滤

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<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" />

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>

enum BiquadFilterType {
  "lowpass",
  "highpass",
  "bandpass",
  "lowshelf",
  "highshelf",
  "peaking",
  "notch",
  "allpass"
};

interface BiquadFilterNode : AudioNode {

    attribute BiquadFilterType type;
    readonly attribute AudioParam frequency; // in Hertz
    readonly attribute AudioParam detune; // in Cents
    readonly attribute AudioParam Q; // Quality factor
    readonly attribute AudioParam gain; // in Decibels

    void getFrequencyResponse(Float32Array frequencyHz,
                              Float32Array magResponse,
                              Float32Array phaseResponse);

};

enum BiquadFilterType {

"lowpass",

"highpass",

"bandpass",

"lowshelf",

"highshelf",

"peaking",

"notch",

"allpass"

};

interface BiquadFilterNode : AudioNode {

attribute BiquadFilterType type;

readonly attribute AudioParam frequency; // in Hertz

readonly attribute AudioParam detune; // in Cents

readonly attribute AudioParam Q; // Quality factor

readonly attribute AudioParam gain; // in Decibels

void getFrequencyResponse(Float32Array frequencyHz,

Float32Array magResponse,

Float32Array phaseResponse);

};

测试连接

audio、html5

HTML5之Audio（四）—— 左右声道

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<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

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>

ChannelSplitterNode createChannelSplitter(optional unsigned long numberOfOutputs = 6);
ChannelMergerNode createChannelMerger(optional unsigned long numberOfInputs = 6);

1 2	ChannelSplitterNode createChannelSplitter(optional unsigned long numberOfOutputs = 6); ChannelMergerNode createChannelMerger(optional unsigned long numberOfInputs = 6);

interface AudioNode : EventTarget {
    //////////////////////  注意   //////////////////////////
    // media,splitter,lGain,rGain,merger都继承与AudioNode
    // 使用了不同的重载
    void connect(AudioNode destination, optional unsigned long output = 0, optional unsigned long input = 0);
    void connect(AudioParam destination, optional unsigned long output = 0);
    //////////////////////  注意   //////////////////////////
    void disconnect(optional unsigned long output = 0);

    readonly attribute AudioContext context;
    readonly attribute unsigned long numberOfInputs;
    readonly attribute unsigned long numberOfOutputs;

    // Channel up-mixing and down-mixing rules for all inputs.
    attribute unsigned long channelCount;
    attribute ChannelCountMode channelCountMode;
    attribute ChannelInterpretation channelInterpretation;

};

interface AudioNode : EventTarget {

////////////////////// 注意 //////////////////////////

// media,splitter,lGain,rGain,merger都继承与AudioNode

// 使用了不同的重载

void connect(AudioNode destination, optional unsigned long output = 0, optional unsigned long input = 0);

void connect(AudioParam destination, optional unsigned long output = 0);

////////////////////// 注意 //////////////////////////

void disconnect(optional unsigned long output = 0);

readonly attribute AudioContext context;

readonly attribute unsigned long numberOfInputs;

readonly attribute unsigned long numberOfOutputs;

// Channel up-mixing and down-mixing rules for all inputs.

attribute unsigned long channelCount;

attribute ChannelCountMode channelCountMode;

attribute ChannelInterpretation channelInterpretation;

};

测试连接

audio、html5

HTML5之Audio（三）—— gain调节音量

2014年2月23日 chen

<!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>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

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>

GainNode createGain();

1	GainNode createGain();

interface GainNode : AudioNode {

    readonly attribute AudioParam gain;

};

interface GainNode : AudioNode {

readonly attribute AudioParam gain;

};

测试连接

audio、html5

HTML5之Audio（二）—— processor调节音量

2014年2月22日 chen

<!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>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

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>

//
ScriptProcessorNode createScriptProcessor(optional unsigned long bufferSize = 0,
                                              optional unsigned long numberOfInputChannels = 2,
                                              optional unsigned long numberOfOutputChannels = 2);

ScriptProcessorNode createScriptProcessor(optional unsigned long bufferSize = 0,

optional unsigned long numberOfInputChannels = 2,

optional unsigned long numberOfOutputChannels = 2);

//
// onaudioprocess
interface AudioProcessingEvent : Event {

    readonly attribute double playbackTime;
    readonly attribute AudioBuffer inputBuffer;
    readonly attribute AudioBuffer outputBuffer;

};

// onaudioprocess

interface AudioProcessingEvent : Event {

readonly attribute double playbackTime;

readonly attribute AudioBuffer inputBuffer;

readonly attribute AudioBuffer outputBuffer;

};

//
// inputBuffer/outputBuffer
interface AudioBuffer {

    readonly attribute float sampleRate;
    readonly attribute long length;

    // in seconds 
    readonly attribute double duration;

    readonly attribute long numberOfChannels;

    Float32Array getChannelData(unsigned long channel);

};

// inputBuffer/outputBuffer

interface AudioBuffer {

readonly attribute float sampleRate;

readonly attribute long length;

// in seconds

readonly attribute double duration;

readonly attribute long numberOfChannels;

Float32Array getChannelData(unsigned long channel);

};

测试连接

老陈是一个普通的文艺二逼青年

分类目录归档：html5

HTML5之FILE API

一、简介

二、FILELIST

三、FileReader

HTML5之Canvas（二）——画曲线quadraticCurveTo、bezierCurveTo

HTML5之Canvas（二）——画曲线arc、arcTo

HTML5之Canvas（一）——画起来

HTML5之Audio（七）—— processor绘制波形图

HTML5之Audio（六）—— 3D音效

HTML5之Audio（五）—— 声音过滤

HTML5之Audio（四）—— 左右声道

HTML5之Audio（三）—— gain调节音量

HTML5之Audio（二）—— processor调节音量

For The Dream