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

 
菜鸟教程(runoob.com) 


 

  
  你的浏览器不支持 video 标签。

Canvas

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

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

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

创建并绘制

 
 
菜鸟教程(runoob.com) 




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




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

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

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

坐标

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

function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("coordiv").innerHTML=" (x,y): (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("coordiv").innerHTML="";
}

路径

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

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



var c=document.getElementById("canvas-path");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Text

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

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



var c=document.getElementById("canvas-text");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",20,50);

渐变

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

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

var c=document.getElementById("canvas-gradient");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#0099FF");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Image

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

var c=document.getElementById("canvas-image");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img.onload = function() {
ctx.drawImage(img,10,10);
}

MathML

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

a2
+
b2
=
c2