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