該部分內(nèi)容摘自 《JavaScript DOM編程藝術(shù)》 第二版 該書(shū)出版于2011年4月
Flash 的遭遇
客觀(guān)地講，沒(méi)有不好的技術(shù)，只有沒(méi)有用好的技術(shù)。JavaScript 的坎坷遭遇讓我不禁想起了另一種被人們?yōu)E用的技術(shù)：Adobe公司研發(fā)的 Flash。
現(xiàn)在，有不少人一提起 Flash 就會(huì)想到煩人的前導(dǎo)頁(yè)面、超長(zhǎng)的下載時(shí)間和隨時(shí)都有可能出問(wèn)題的瀏覽體驗(yàn)。這些惡劣印象其實(shí)與 Flash 毫不相關(guān)，它們都是由那些質(zhì)量低劣的實(shí)現(xiàn)腳本造成的。
把 Flash 與超長(zhǎng)的下載時(shí)間聯(lián)系在一起很不公平，因?yàn)橹谱鞫绦【返氖噶繄D形和視頻片段本是 Flash 技術(shù)的強(qiáng)項(xiàng)之一。利用 Flash 技術(shù)制作一些視頻片段來(lái)介紹自己的網(wǎng)站是一個(gè)很好的創(chuàng)意，但當(dāng)這種做法成為一種潮流時(shí)，這類(lèi)視頻片段的數(shù)量越來(lái)越多、體積也越來(lái)越大，網(wǎng)頁(yè)的下載時(shí)間也不可避免地變得越來(lái)越長(zhǎng)。此時(shí)，F(xiàn)lash 要想洗刷掉自己身上的惡名談何容易。
我敢說(shuō)，之所以會(huì)有那么多的網(wǎng)站迫不及待地在網(wǎng)頁(yè)上嵌入一些毫無(wú)必要的 Flash 視頻片段，是因?yàn)?"大家都有，所以我也要有" 的心理而不是因?yàn)閷?shí)際應(yīng)用的需要。既然別人的網(wǎng)頁(yè)上有 Flash 動(dòng)畫(huà)，那么我的網(wǎng)頁(yè)上也要有 Flash 動(dòng)畫(huà)，有無(wú)必要的問(wèn)題已無(wú)人問(wèn)津了。
HTML5簡(jiǎn)介
HTML5 是 HTML 語(yǔ)言當(dāng)前及未來(lái)的新標(biāo)準(zhǔn)。HTML 規(guī)范從 HTML4 到 XHTML，再到 Web Apps 1.0，最后又回到 HTML5，整個(gè)成長(zhǎng)歷程充滿(mǎn)了艱辛和爭(zhēng)議。多種技術(shù)統(tǒng)一的趨勢(shì)日益明朗，HTML5 標(biāo)志著下一代 Web 的帷幕正在緩緩拉開(kāi)。
談到 Web 設(shè)計(jì)，最準(zhǔn)確的理解是把網(wǎng)頁(yè)看成三個(gè)層：
（1）結(jié)構(gòu)層
（2）樣式層
（3）行為層
這三個(gè)層分別對(duì)應(yīng)不同的技術(shù)，分別是：
（1）超文本標(biāo)記語(yǔ)言（HTML）
（2）層疊樣式表（CSS）
（3）JavaScript 和文檔對(duì)象模型（DOM）
隨著 HTML5 的到來(lái)，上面所說(shuō)的結(jié)構(gòu)層、樣式層和行為層已經(jīng)被整裝到一個(gè)小集合中，不過(guò)也僅僅就是一個(gè)集合。HTML5 在這個(gè)集合中提供了幾種旗鼓相當(dāng)?shù)募夹g(shù)，讓我們可以按需取用或者調(diào)用。
HTML5提供了很多交互及媒體元素，例如<canvas>、<audio>和<video>。表單得到了加強(qiáng)，新增了顏色拾取器、數(shù)據(jù)選擇器、滑動(dòng)條和進(jìn)度條。
在行為層，HTML5 規(guī)定了 DOM 中每個(gè)新元素的交互方式，以及新的 API。例如可以自定義 <video> 元素的控件，改變其播放方式，<form> 元素則支持進(jìn)度控制，而在 <canvas> 元素中，可以繪制各種圖形和增加圖片及其他對(duì)象。
以下內(nèi)容摘自 W3school
什么是 HTML5？
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。
HTML 的上一個(gè)版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
HTML5 是如何起步的？
HTML5 是 W3C 與 WHATWG 合作的結(jié)果。
編者注：W3C 指 World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟。
編者注：WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專(zhuān)注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。
為 HTML5 建立的一些規(guī)則：
- 新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。
- 減少對(duì)外部插件的需求（比如 Flash）
- 更優(yōu)秀的錯(cuò)誤處理
- 更多取代腳本的標(biāo)記
- HTML5 應(yīng)該獨(dú)立于設(shè)備
- 開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明
一些傳送門(mén)
一套基于HTML5的網(wǎng)絡(luò)圖組件qunee
靜態(tài)圖元Demo
動(dòng)態(tài)拓?fù)鋱DDemo
上述Demo可體現(xiàn)HTML5的qunee組件的性能
知乎關(guān)于 Flash 和 HTML5 的高贊回答
HTML5動(dòng)畫(huà)Demo
彈跳小球：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hangge.com</title>
<style>
canvas {
cursor: pointer;
border: 1px solid black;
}
</style>
<script>
// 用于表示球的所有細(xì)節(jié)的Ball函數(shù)
function Ball(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.strokeColor = "black";
this.fillColor = "red";
}
// 這個(gè)數(shù)組用于保存畫(huà)布上出現(xiàn)的所有球
var balls = [];
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.onmousedown = canvasClick;
// 每0.02秒繪制一次畫(huà)布
setTimeout(drawFrame, 20);
};
function addBall() {
// 小球半徑
var radius = 20;
// 創(chuàng)建新的ball對(duì)象
var ball = new Ball(50,50,1,1,radius);
// 將其保存在balls數(shù)組中
balls.push(ball);
}
function clearBalls() {
// 刪除所有球?qū)ο? balls = [];
}
function drawFrame() {
// 清除畫(huà)布
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// 循環(huán)所有的球
for(var i=0; i<balls.length; i++) {
// 把每個(gè)球移動(dòng)到新的位置
var ball = balls[i];
ball.x += ball.dx;
ball.y += ball.dy;
// 添加重力作用的效果，讓球加速下落
if ((ball.y) < canvas.height) ball.dy += 0.22;
// 添加摩擦力作用的效果，減慢左右移動(dòng)速度
ball.dx = ball.dx * 0.998;
// 如果球碰到某一邊，就反彈回來(lái)
if ((ball.x + ball.radius > canvas.width) || (ball.x - ball.radius < 0)) {
ball.dx = -ball.dx;
}
// 如果球碰到底部，反彈回來(lái)，但慢慢地減速
if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius < 0)) {
ball.dy = -ball.dy*0.96;
}
context.beginPath();
context.fillStyle = ball.fillColor;
// 繪制球
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
context.lineWidth = 1;
context.fill();
context.stroke();
}
// 20毫秒后繪制下一幀
setTimeout(drawFrame, 20);
}
function canvasClick(e) {
// 獲取點(diǎn)擊的坐標(biāo)
var clickX = e.pageX - canvas.offsetLeft;
var clickY = e.pageY - canvas.offsetTop;
// 找到點(diǎn)中的小球
for(var i in balls)
{
var ball = balls[i];
if ((clickX > (ball.x-ball.radius)) && (clickX < (ball.x+ball.radius)))
{
if ((clickY > (ball.y-ball.radius)) && (clickY < (ball.y+ball.radius)))
{
// 改變點(diǎn)擊的小球速度
ball.dx -= 2;
ball.dy -= 3;
return;
}
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">
</canvas>
<div>
<button onclick="addBall()">添加小球</button>
<button onclick="clearBalls()">清空畫(huà)布</button>
</div>
</body>
</html>
