初识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视频

HTML5音频

HTML5画布

一套基于HTML5的网络图组件qunee 静态图元Demo 动态拓扑图Demo 上述Demo可体现HTML5的qunee组件的性能

知乎关于 Flash 和 HTML5 的高赞回答

HTML5动画Demo

Canvas动画特效Demo

冲撞小球Demo

HTML5动画


弹跳小球

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟前端工程师

html+css学习笔记013-阿里图标0iframe

1282
来自专栏别先生

HTML+CSS提升小实战

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; ch...

7828
来自专栏Android机动车

自定义View之客服好评View

这个版本主要的任务就是完成环信客服系统的集成,上一篇文章 仿IOS下载View 也是这个版本开发需求中的一小部分,那今天介绍一下另一个小需求 客服好评。 客服好...

1325
来自专栏应用案例

揭开ps的神秘面纱——初步认识photoshop

在这个看脸的“世界”里 论软件的强大莫过于ps 堪称美图界“磨人的小妖精” 下面就让小编带大家伙了解一下神秘的它吧 1.什么是psPS(位图图像处理软件Phot...

2258
来自专栏九彩拼盘的叨叨叨

《写给大家看的设计书》摘要与总结

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

803
来自专栏GIS讲堂

Javascript+CSS实现影像卷帘效果

用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一...

1292
来自专栏腾讯社交用户体验设计

H5动效的常见制作手法 - 腾讯ISUX

5962
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

1673
来自专栏小尘哥的专栏

移动端H5的简单时间轴效果

最近给移动端写接口,写完了才告诉我其中两个页面是H5的,需要我这边来做。本着“我是公司一块砖,哪里需要哪里搬”的原则,让做就做。结果一看原型,还有时间轴效果。第...

3002
来自专栏Coding迪斯尼

VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发

1254

扫码关注云+社区

领取腾讯云代金券