當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2023/12/9 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 [HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

介紹

本系列博客將主要介紹如今大紅大紫的移動Web應用程序開發最重要的三個工具：HTML5，JavaScript， CSS3。

本篇是HTML5介紹的第三篇，主要介紹HTML5的Canvas API。

移動Web應用程序開發 HTML5篇 (一) HTML5簡介

移動Web應用程序開發 HTML5篇 (二) 新功能介紹和測試

?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軸延伸。坐標圖如下所示：

再看一個例子：

<html>

?<head>

05	??<script type="application/x-javascript">

07	????function draw() {

09	??????var canvas = document.getElementById("canvas");

11	??????if?(canvas.getContext) {

13	????????var ctx = canvas.getContext("2d");

16	????????ctx.fillStyle =?"rgb(200,0,0)";

18	????????ctx.fillRect (10, 10, 55, 50);

21	????????ctx.fillStyle =?"rgba(0, 0, 200, 0.5)";

23	????????ctx.fillRect (30, 30, 55, 50);

??????}

????}

29	??</script>

?</head>

33	?<body onload="draw();">

35	???<canvas id="canvas"?width="150"?height="150"></canvas>

?</body>

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

03	????this.context =?this.canvas.getContext("2d");

05	????this.drawStage = undefined;

07	????this.listening =?false;

10	????// Canvas Events

12	????this.mousePos = null;

14	????this.mouseDown =?false;

16	????this.mouseUp =?false;

19	????// Region Events

21	????this.currentRegion = null;

23	????this.regionCounter = 0;

25	????this.lastRegionIndex = null;

28	????// Animation

30	????this.t = 0;

32	????this.timeInterval = 0;

34	????this.startTime = 0;

36	????this.lastTime = 0;

38	????this.frame = 0;

40	this.animating =?false;

其動畫部分代碼：

01	Kinetic_2d.prototype.isAnimating = function(){

03	????return?this.animating;

};

08	Kinetic_2d.prototype.getFrame = function(){

10	????return?this.frame;

};

14	Kinetic_2d.prototype.startAnimation = function(){

16	????this.animating =?true;

18	????var date =?new?Date();

20	????this.startTime = date.getTime();

22	????this.lastTime =?this.startTime;

25	????if?(this.drawStage !== undefined) {

27	????????this.drawStage();

????}

32	????this.animationLoop();

};

36	Kinetic_2d.prototype.stopAnimation = function(){

38	????this.animating =?false;

};

42	Kinetic_2d.prototype.getTimeInterval = function(){

44	????return?this.timeInterval;

};

48	Kinetic_2d.prototype.getTime = function(){

50	????return?this.t;

};

54	Kinetic_2d.prototype.getFps = function(){

56	????return?this.timeInterval > 0 ? 1000 /?this.timeInterval : 0;

};

60	Kinetic_2d.prototype.animationLoop = function(){

62	????var that =?this;

65	????this.frame++;

67	????var date =?new?Date();

69	????var thisTime = date.getTime();

71	????this.timeInterval = thisTime -?this.lastTime;

73	????this.t +=?this.timeInterval;

75	????this.lastTime = thisTime;

78	????if?(this.drawStage !== undefined) {

80	????????this.drawStage();

????}

85	????if?(this.animating) {

87	????????requestAnimFrame(function(){

89	????????????that.animationLoop();

91	????????});

????}

};

讀者可以從以下地址下載源碼進行測試學習：下載地址。更多的例子，
包括Canvas 3D動畫，下載地址，Canvas動畫是HTML5游戲開發最重要的工具，更多關于Canvas的信息將會和接下來的CSS3一起介紹。本篇完。參考資料："Pro. HTML5 Programing"?http://www.kineticjs.com/?...

轉載于:https://www.cnblogs.com/webapplee/p/3771675.html

總結

以上是生活随笔為你收集整理的[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：斯坦福大学Andrew Ng - 机器学
下一篇： Web前端笔试面试题汇总（转自githu