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

 

posted @ 2014-06-06 08:04  It's_Lee  阅读(197)  评论(0)    收藏  举报