zoukankan      html  css  js  c++  java

  • [HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API

    介绍
    本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。
    本篇是HTML5介绍的第三篇，主要介绍HTML5的Canvas API。
    相关文章：
    •1. Canvas API介绍
    <canvas>是HTML5引入的一个新的元素，可以使用JavaScript来绘制图形、合成图象、以及做一些动画。<canvas>最先出现在Apple Mac OS X Dashboard中，也被应用于Safari，随着后来基于Gecko1.8的浏览器Firefox 1.5的加入变得流行起来，目前<canvas>是HTML 5标准规范的一部分。目前最新版本的主流浏览器都支持<canvas>，支持情况如下图：
    •2. Canvas 入门
    一个简单的Canvas例子，代码如下：

    [xhtml]<!DOCTYPE HTML>

    <html>

    <canvas id="diagonal" style="border: 1px solid;" width="200" height="200">
    </canvas>
    </html>
    <script>
    function drawDiagonal() {
    // Get the canvas element and its drawing context
    var canvas = document.getElementById('diagonal');
    var context = canvas.getContext('2d');
    // Create a path in absolute coordinates
    context.beginPath();
    context.moveTo(100, 140);
    context.lineTo(140, 70);
    // Stroke the line onto the canvas
    context.stroke();
    }
    window.addEventListener("load", drawDiagonal, true);
    </script>[/xhtml]

    代码运行效果如图，通过绝对坐标画出一条线：
    Canvas把整个画布用坐标值进行了表示，左上角为（0，0），依次沿着X轴和Y轴延伸。坐标图如下所示：
    再看一个例子：
    01 <html>
    02  
    03  <head>
    04  
    05   <script type="application/x-javascript">
    06  
    07     function draw() {
    08  
    09       var canvas = document.getElementById("canvas");
    10  
    11       if (canvas.getContext) {
    12  
    13         var ctx = canvas.getContext("2d");
    14  
    15  
    16         ctx.fillStyle = "rgb(200,0,0)";
    17  
    18         ctx.fillRect (10, 10, 55, 50);
    19  
    20  
    21         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    22  
    23         ctx.fillRect (30, 30, 55, 50);
    24  
    25       }
    26  
    27     }
    28  
    29   </script>
    30  
    31  </head>
    32  
    33  <body onload="draw();">
    34  
    35    <canvas id="canvas" width="150" height="150"></canvas>
    36  
    37  </body>
    38  
    39 </html> 
     
    运行效果如下图所示，分别创建了两个色块，对其进行颜色赋值和透明度设置：
    相关代码 下载
    •3. Canvas 动画
    Canvas的动画功能是Flash的克星之一，结合了JavaScript和CSS3，可以说任何Flash能够做出的动画在Canvas中都可以实现。Canvas动画的原理和Flash类似：通过移动相应活动的图形来展示动画
    如果是一个2D的canvas动画，那么在JavaScript中需要新建以下Object， 本例来源于KineticJS 2d JavaScript Library：
    01     this.canvas = document.getElementById(canvasId);
    02  
    03     this.context = this.canvas.getContext("2d");
    04  
    05     this.drawStage = undefined;
    06  
    07     this.listening = false;
    08  
    09  
    10     // Canvas Events
    11  
    12     this.mousePos = null;
    13  
    14     this.mouseDown = false;
    15  
    16     this.mouseUp = false;
    17  
    18  
    19     // Region Events
    20  
    21     this.currentRegion = null;
    22  
    23     this.regionCounter = 0;
    24  
    25     this.lastRegionIndex = null;
    26  
    27  
    28     // Animation
    29  
    30     this.t = 0;
    31  
    32     this.timeInterval = 0;
    33  
    34     this.startTime = 0;
    35  
    36     this.lastTime = 0;
    37  
    38     this.frame = 0;
    39  
    40 this.animating = false;
    其动画部分代码：
    01 Kinetic_2d.prototype.isAnimating = function(){
    02  
    03     return this.animating;
    04  
    05 };
    06  
    07  
    08 Kinetic_2d.prototype.getFrame = function(){
    09  
    10     return this.frame;
    11  
    12 };
    13  
    14 Kinetic_2d.prototype.startAnimation = function(){
    15  
    16     this.animating = true;
    17  
    18     var date = new Date();
    19  
    20     this.startTime = date.getTime();
    21  
    22     this.lastTime = this.startTime;
    23  
    24  
    25     if (this.drawStage !== undefined) {
    26  
    27         this.drawStage();
    28  
    29     }
    30  
    31  
    32     this.animationLoop();
    33  
    34 };
    35  
    36 Kinetic_2d.prototype.stopAnimation = function(){
    37  
    38     this.animating = false;
    39  
    40 };
    41  
    42 Kinetic_2d.prototype.getTimeInterval = function(){
    43  
    44     return this.timeInterval;
    45  
    46 };
    47  
    48 Kinetic_2d.prototype.getTime = function(){
    49  
    50     return this.t;
    51  
    52 };
    53  
    54 Kinetic_2d.prototype.getFps = function(){
    55  
    56     return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
    57  
    58 };
    59  
    60 Kinetic_2d.prototype.animationLoop = function(){
    61  
    62     var that = this;
    63  
    64  
    65     this.frame++;
    66  
    67     var date = new Date();
    68  
    69     var thisTime = date.getTime();
    70  
    71     this.timeInterval = thisTime - this.lastTime;
    72  
    73     this.t += this.timeInterval;
    74  
    75     this.lastTime = thisTime;
    76  
    77  
    78     if (this.drawStage !== undefined) {
    79  
    80         this.drawStage();
    81  
    82     }
    83  
    84  
    85     if (this.animating) {
    86  
    87         requestAnimFrame(function(){
    88  
    89             that.animationLoop();
    90  
    91         });
    92  
    93     }
    94  
    95 };
    读者可以从以下地址下载源码进行测试学习：下载地址。
    更多的例子，
    包括Canvas 3D动画，下载地址，Canvas动画是HTML5游戏开发最重要的工具，更多关于Canvas的信息将会和接下来的CSS3一起介绍。
    本篇完。
    参考资料："Pro. HTML5 Programing" http://www.kineticjs.com/ ...
  • 相关阅读:
    精心总结的Linux运维面试题汇总
    [DevExpress]DxValidationProvider分享
    PivotGridField 中对Unbound的列赋值（除法）--数据钻取
    PivotGridField 中对Unbound的列赋值（除法）
    2020后端/前段开发工程师应当掌握的专业技能一览（源自github）
    跨域的CRUD
    水印图片和文字
    导入 导出 压缩 解压
    winForm的CRUD 加上传图片 的DAL
    winForm的CRUD 加上传图片
  • 原文地址：https://www.cnblogs.com/webapplee/p/3771675.html
Copyright © 2011-2022 走看看