html5

HTML5 中的一些新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用
Canvas 坐标
<canvas id="myCanvas" width="200" height="100">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

绘制线条

　　moveTo(x,y) 定义线条开始坐标

　　lineTo(x,y) 定义线条结束坐标

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

绘制圆形,

　　arc(x,y,r,start,stop)

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

文本

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

渐变

• createLinearGradient(x,y,x1,y1) - 创建线条渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d"); // 创建渐变

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white"); // 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

图像

把一幅图像放置到画布上, 使用以下方法:

• drawImage(image,x,y)

INPUT类型

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

html5

原文：https://www.cnblogs.com/njuwyx/p/12713912.html