HTML5

HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5 的设计目的是为了在移动设备上支持多媒体。

有趣的新特性：

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素

比如 article、footer、header、nav、section

  • 新的表单控件

比如 calendar、date、time、email、url、search

Hello World

  • hello.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  你的浏览器不支持 video 标签。
</video>
 
</body>
</html>

Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是 JavaScript )来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 Canvas 绘制路径,盒、圆、字符以及添加图像。

创建并绘制

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0099FF";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>
您的浏览器不支持 HTML5 canvas 标签。

坐标

canvas 是一个二维网格。canvas 的左上角坐标为 (0,0).

路径

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

您的浏览器不支持 HTML5 canvas 标签。

Text

使用 Arial 字体在画布上绘制一个高 30px 的文字（实心）：

您的浏览器不支持 HTML5 canvas 标签。

渐变

创建一个线性渐变。使用渐变填充矩形:

您的浏览器不支持 HTML5 canvas 标签。

Image

The Scream

您的浏览器不支持 HTML5 canvas 标签。

MathML

(经测试chrome不支持，safari支持。)

a2 + b2 = c2