[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API
生活随笔
收集整理的這篇文章主要介紹了
[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
介紹
?
讀者可以從以下地址下載源碼進行測試學習：下載地址。 更多的例子，
包括Canvas 3D動畫，下載地址，Canvas動畫是HTML5游戲開發最重要的工具，更多關于Canvas的信息將會和接下來的CSS3一起介紹。 本篇完。 參考資料："Pro. HTML5 Programing"?http://www.kineticjs.com/?...
?
本系列博客將主要介紹如今大紅大紫的移動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軸延伸。坐標圖如下所示：?
?
再看一個例子：?
| 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/?...
?
轉載于:https://www.cnblogs.com/webapplee/p/3771675.html
總結
以上是生活随笔為你收集整理的[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 斯坦福大学Andrew Ng - 机器学
- 下一篇： Web前端笔试面试题汇总（转自githu