+发表新主题
查看: 1705|回复: 0

[HTML5开发] h5 - 音频

[复制链接]

[HTML5开发] h5 - 音频

[复制链接]
水中花 发表于 2006-2-27 00:00:00 浏览:  1705 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
1. 音频处理

     * 基本内容

       * 目前音频处理技术

         * Flash技术也可以音频处理

                  * Media Player播放器允许嵌入在网页中

            * HTML 5提供的音频处理 - <audio>

         * 浏览器原生支持

                    * 性能很好

                    * 移动端支持

            * <audio>元素支持的音频格式

         * mp3 - 音频文件的扩展名为".mp3"

                    * ogg

                    * wav

     * 如何使用<audio>元素，用法与<video>元素一样

       * 引入单个音频格式

          <audio src="音频文件的路径" autoplay>

                     浏览器不支持的提示内容

                   </audio>

      * 引入多个音频格式

         <audio autoplay>

                    <source src="音频文件的路径" />

                   <source src="音频文件的路径" />

                   <source src="音频文件的路径" />

                  浏览器不支持的提示内容

                  </audio>

     * <audio>元素的特有属性

        * autoplay - 自动播放

        * controls - 控制面板

        * loop - 循环播放

        * preload - 预加载音频文件

    * <audio>元素的高级编程方式

       * 事件

         * play - 音频播放时触发

                   * pause - 音频暂停时触发

       * 方法

         * play() - 用于播放音频

                   * pause() - 用于暂停音频

       * 属性

         * paused - 如果音频为暂停或未播放时,返回true

                  * ended - 如果音频播放完毕时,返回true


2.Canvas(画布)

   * 基本内容

     * Canvas技术允许在HTML页面直接绘制图形

       * 不再需要引入外部图片(图形),HTML页面性能有所提高

       * 可以实现一些比较复杂的图形绘制工作

     * Canvas技术主要应用方向

       * Web应用方面主要实现图表类

       * 网页游戏方面 - 主要实现2D效果

     * HTML 5提供有关图形方面的技术

       * Canvas - 主要以2D为主

       * WebGL - 主要以3D为主

       * SVG - 矢量图

     * 网络网页游戏

       * HTML 5实现的技术

         * Canvas - 静态图形、动态效果

         * Web Workers - 提供类多线程效果

         * Web Socket - B/S架构下提供Socket协议

     * 如何使用Canvas(画布)

     * 在HTML页面中定义<canvas>元素

       * 设置<canvas>元素宽度和高度使用属性方式

       * 使用CSS样式方式设置<canvas>元素的宽度和高度会导致绘制的图形被拉伸

     * 在JS代码中

       * 获取<canvas>元素

       * 通过<canvas>元素,创建画布对象

         * getContext('2d')函数

                 * 返回画布对象

       * 利用画布对象进行图形的绘制



例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>如何使用canvas</title>

  7. </head>

  8. <body>

  9.   <!--

  10. 1. 在HTML页面中,定义<canvas>元素

  11. * 默认只定义<canvas>元素时

  12.    * 效果非常类似于<div>元素,但不一样的地方:

  13.      * <div>元素在默认情况下,不具有高度和宽度的

  14. * <canvas>元素在默认情况下,具有高度和宽度的

  15.    * 宽度 - 300px

  16.    * 高度 - 150px

  17. * 设置<canvas>元素的高度和宽度

  18.    * (建议)使用属性width和height

  19.    * 使用CSS中的属性width和height

  20.      * 绘制的图形会被拉伸

  21.   -->

  22.   <canvas id="canvas" width="500px" height="500px" style="background:pink;"></canvas>

  23.   <!--

  24.   <canvas id="canvas" style="width:500px;height:500px;"></canvas>

  25.      这种方式会导致绘制的图形被拉伸

  26.   -->

  27.   <script>

  28. // 2. 获取HTML页面中的<canvas>元素

  29. var canvas = document.getElementById("canvas");

  30. /*

  31.    3. 通过<canvas>元素,创建画布对象

  32.      使用getContext(type)函数,创建画布对象

  33. * 该函数返回画布对象

  34. * type参数

  35.    * 设置当前创建的画布是2d还是3d

  36.    * 注意

  37.      * 参数选项是2d(3d效果使用WebGL)

  38. * 必须写成"2d"

  39. */

  40. var context = canvas.getContext("2d");

  41. // 4. 利用画布对象,进行绘制图形

  42. context.fillRect(10,10,100,100);

  43.   </script>

  44. </body>

  45. </html>
复制代码
效果：

202457y6jjjtx933jxelec.png

   * Canvas的特点

      * 绘制的图形与HTML页面之间是无关系的

      * 通过Canvas绘制的图形不能使用DOM API

      * 通过Canvas绘制的图形不能绑定事件

      * Canvas画布最终是以图片(png|jpg)形式出现

      * 绘制图形默认的颜色为黑色

   * 绘制图形(Canvas API)

     * 绘制矩形

       * fillRect(x,y,width,height) - 绘制实心(填充)矩形

         * x和y - 绘制矩形的左上角的坐标值

                   * width - 设置绘制矩形的宽度(单位为px)

                   * height - 设置绘制矩形的高度(单位为px)

      * strokeRect(x,y,width,height) - 绘制空心(描边)矩形

         * x和y - 绘制矩形的左上角的坐标值

                   * width - 设置绘制矩形的宽度(单位为px)

                   * height - 设置绘制矩形的高度(单位为px)

            * clearRect(x,y,width,height) - 清除指定区域的矩形

         * x和y - 绘制矩形的左上角的坐标值

                   * width - 设置绘制矩形的宽度(单位为px)

                   * height - 设置绘制矩形的高度(单位为px)



例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>Canvas绘制矩形</title>

  7. </head>

  8. <body>

  9.   <canvas id="canvas" width="500px" height="500px"></canvas>

  10.   <script>

  11. // 1. 获取<canvas>元素

  12. var canvas = document.getElementById("canvas");

  13. // 2. 创建画布对象

  14. var context = canvas.getContext('2d');

  15. // 3. 绘制图形

  16. // a. 绘制实心矩形

  17. context.fillRect(10,10,100,100);

  18. // b. 绘制空心矩形

  19. context.strokeRect(120,10,100,100);

  20. // c. 清除指定区域的矩形

  21. context.fillRect(230,10,100,100);

  22. context.clearRect(240,20,80,80);

  23.   </script>

  24. </body>

  25. </html>
复制代码
效果：

202457y6jjjtx933jxelec.png

    * 设置样式

       * fillStyle - 设置填充样式

       * strokeStyle - 设置描边样式

       * globalAlpha - 设置透明度(0-1)

       * 注意

         * 一定要先设置样式(颜色),再绘制图形

                   * 每次改变样式(颜色),重新设置

         * 设置颜色的方式

          * 使用普通的单词,如red、green、pink...

                  * 使用#000000形式

                  * 使用三原色rgba(0,0,0,1)形式

例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>Canvas设置样式</title>

  7. </head>

  8. <body>

  9.   <canvas id="canvas" width="500px" height="500px"></canvas>

  10.   <script>

  11. var canvas = document.getElementById("canvas");

  12. var context = canvas.getContext('2d');



  14. // a. 设置填充样式

  15. context.fillStyle = "pink";

  16. // b. 绘制实心矩形

  17. context.fillRect(10,10,100,100);



  19. context.fillStyle = "blue";

  20. context.fillRect(10,120,100,100);



  22. // 设置描边样式

  23. context.strokeStyle = "red";

  24. context.strokeRect(120,10,100,100);



  26. context.strokeStyle = "green";

  27. context.strokeRect(120,120,100,100);



  29. // 设置透明度

  30. context.globalAlpha = 0.5;

  31. context.fillRect(230,10,100,100);



  33. context.fillStyle = "black";

  34. context.globalAlpha = 0.1;

  35. context.fillRect(230,120,100,100);

  36.   </script>

  37. </body>

  38. </html>
复制代码
效果：

202457y6jjjtx933jxelec.png
回复

使用道具 举报

精彩评论 (0) QQ好友和群QQ好友和群

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

水中花
技冠群雄

37

主题

37

帖子

142

积分

技冠群雄

Rank: 6Rank: 6

积分
142
QQ
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网