腾讯云·社区
初识HTML5
该部分内容摘自 《JavaScript DOM编程艺术》 第二版 该书出版于2011年4月
Flash 的遭遇
客观地讲，没有不好的技术，只有没有用好的技术。JavaScript 的坎坷遭遇让我不禁想起了另一种被人们滥用的技术：Adobe公司研发的 Flash。
现在，有不少人一提起 Flash 就会想到烦人的前导页面、超长的下载时间和随时都有可能出问题的浏览体验。这些恶劣印象其实与 Flash 毫不相关，它们都是由那些质量低劣的实现脚本造成的。
把 Flash 与超长的下载时间联系在一起很不公平，因为制作短小精悍的矢量图形和视频片段本是 Flash 技术的强项之一。利用 Flash 技术制作一些视频片段来介绍自己的网站是一个很好的创意，但当这种做法成为一种潮流时，这类视频片段的数量越来越多、体积也越来越大，网页的下载时间也不可避免地变得越来越长。此时，Flash 要想洗刷掉自己身上的恶名谈何容易。
我敢说，之所以会有那么多的网站迫不及待地在网页上嵌入一些毫无必要的 Flash 视频片段，是因为 "大家都有，所以我也要有" 的心理而不是因为实际应用的需要。既然别人的网页上有 Flash 动画，那么我的网页上也要有 Flash 动画，有无必要的问题已无人问津了。
HTML5简介
HTML5 是 HTML 语言当前及未来的新标准。HTML 规范从 HTML4 到 XHTML，再到 Web Apps 1.0，最后又回到 HTML5，整个成长历程充满了艰辛和争议。多种技术统一的趋势日益明朗，HTML5 标志着下一代 Web 的帷幕正在缓缓拉开。
谈到 Web 设计，最准确的理解是把网页看成三个层： （1）结构层 （2）样式层 （3）行为层 这三个层分别对应不同的技术，分别是： （1）超文本标记语言（HTML） （2）层叠样式表（CSS） （3）JavaScript 和文档对象模型（DOM）
随着 HTML5 的到来，上面所说的结构层、样式层和行为层已经被整装到一个小集合中，不过也仅仅就是一个集合。HTML5 在这个集合中提供了几种旗鼓相当的技术，让我们可以按需取用或者调用。
HTML5提供了很多交互及媒体元素，例如<canvas>、<audio>和<video>。表单得到了加强，新增了颜色拾取器、数据选择器、滑动条和进度条。
在行为层，HTML5 规定了 DOM 中每个新元素的交互方式，以及新的 API。例如可以自定义 <video> 元素的控件，改变其播放方式，<form> 元素则支持进度控制，而在 <canvas> 元素中，可以绘制各种图形和增加图片及其他对象。
以下内容摘自 W3school
什么是 HTML5？
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是如何起步的？
HTML5 是 W3C 与 WHATWG 合作的结果。 编者注：W3C 指 World Wide Web Consortium，万维网联盟。 编者注：WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
为 HTML5 建立的一些规则：
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求（比如 Flash）
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明
一些传送门
一套基于HTML5的网络图组件qunee 静态图元Demo 动态拓扑图Demo 上述Demo可体现HTML5的qunee组件的性能
HTML5动画Demo
弹跳小球：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hangge.com</title>
<style>
canvas {
cursor: pointer;
border: 1px solid black;
}
</style>
<script>
// 用于表示球的所有细节的Ball函数
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";
}
// 这个数组用于保存画布上出现的所有球
var balls = [];
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.onmousedown = canvasClick;
// 每0.02秒绘制一次画布
setTimeout(drawFrame, 20);
};
function addBall() {
// 小球半径
var radius = 20;
// 创建新的ball对象
var ball = new Ball(50,50,1,1,radius);
// 将其保存在balls数组中
balls.push(ball);
}
function clearBalls() {
// 删除所有球对象
balls = [];
}
function drawFrame() {
// 清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// 循环所有的球
for(var i=0; i<balls.length; i++) {
// 把每个球移动到新的位置
var ball = balls[i];
ball.x += ball.dx;
ball.y += ball.dy;
// 添加重力作用的效果，让球加速下落
if ((ball.y) < canvas.height) ball.dy += 0.22;
// 添加摩擦力作用的效果，减慢左右移动速度
ball.dx = ball.dx * 0.998;
// 如果球碰到某一边，就反弹回来
if ((ball.x + ball.radius > canvas.width) || (ball.x - ball.radius < 0)) {
ball.dx = -ball.dx;
}
// 如果球碰到底部，反弹回来，但慢慢地减速
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) {
// 获取点击的坐标
var clickX = e.pageX - canvas.offsetLeft;
var clickY = e.pageY - canvas.offsetTop;
// 找到点中的小球
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)))
{
// 改变点击的小球速度
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()">清空画布</button>
</div>
</body>
</html>本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句