一、什么是 HTML5？

HTML5 是最捷伊 HTML 国际标准；HTML5 是专门针对为贯穿多样的 web 文档而结构设计的，因此无须附加插件；HTML5 保有捷伊语法、绘图和影音原素；HTML5 提供更多的新原素和捷伊 API 精简了 web 插件的构筑；HTML5 是虚拟化的，被结构设计为在相同类别的硬体（PC、智能智能手机、智能手机、投影机之类）其内运转；

二、HTML5的许多新优点

用作油画的 canvas 原素；用作传播方式回看的 video 和 audio 原素；对邻近地区app储存的更快的全力支持；捷伊特定文档原素，比如说article、footer、header、nav、section；捷伊配置文件命令行，比如说 calendar、date、time、email、url、search；

三、video 原素

<video> 原素提供更多了播映、中止和音调命令行来掌控音视频；<video> 原素也提供更多了 width 和 height 属性掌控音视频的体积；<video> 与</video> 条码间填入的文档是提供更多给不全力支持 video 原素的插件表明的；

video 原素的四种音音频格式：

Ogg：暗含 Theora 音视频代码和 Vorbis 音视频代码的 Ogg 文档；MPEG4：暗含 H.264 音视频代码和 AAC 音视频代码的 MPEG 4 文档；WebM：暗含 VP8 音视频代码和 Vorbis 音视频代码的 WebM 文档；

video 原素的优点：

src：要播映的音视频的 URL；width：增设音视频播映器的长度；height：增设音视频播映器的度；autoplay：自动播映；controls：假如再次出现该优点，则向使用者表明命令行，比如播映按钮；loop：循环式播映；preload：假如再次出现该优点，则音视频在页面读取时进行读取，并trained播映，假如采用 “autoplay”，则忽视该优点；

video 原素的方式：

pause()：中止现阶段播放的音视频；play()：开始播映音视频；load()：再次读取音视频原素；canPlayType()：检验插件与否能播映选定的音视频类别；addTextTrack()：向音视频/音视频加进捷伊文档近地点；

四、audio原素

HTML5 明确规定了在页面上内嵌音视频原素的国际标准，即采用 <audio> 原素；<audio>原素能播映声音文档或是音视频流；

audio原素的四种音音频格式：

MP3：适用作于Internet Explorer、Chrome、Safari 等插件；Wav：适用作于Firefox、Opera等插件；Ogg：适用作于Firefox、IE9、Chrome 插件；

audio原素的优点：

src：要播映的音视频的 URL；autoplay：自动播映；controls：假如再次出现该优点，则向使用者表明命令行；loop：循环式播映；preload：假如再次出现该优点，则音视频在页面读取时进行读取，并trained播映，假如采用 “autoplay”，则忽视该优点；

audio原素的方式：

pause()：中止现阶段播映的音视频；play()：开始播映音视频；load()：再次读取音视频；

五、canvas 原素

什么是 Canvas？

HTML5 的 canvas 原素通过 JavaScript 在页面上绘制图像，原素本身并没有绘制能力，它只是绘图容器，必须采用脚本来绘制绘图；canvas 保有多种绘制路径、矩形、圆形、字符和加进图像的方法；创建一个画布<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

Canvas在HTML5 中的新优点有：

height：增设 canvas 的度；width：增设 canvas 的长度；

六、绘制三角形

getElementById()：可返回对保有选定 ID 的第一个对象的引用；

getContext()：返回一个用作在画布上绘图的环境，2d表示二维绘图；

beginPath()：开始一条路径，或重置现阶段的路径；

moveTo()：把路径移动到画布中的选定点，不创建线条。

lineTo()：加进一个新点，然后创建从该点到画布中最后选定点的线条（该方式并不会创建线条）；

closePath()：创建从现阶段点到开始点的路径；

strokeStyle优点：增设或返回用作笔触的颜色、渐变或模式；

stroke()：会实际地绘制出路径；

fillStyle优点：增设或返回用作填充油画的颜色、渐变或模式；

fill()：填充现阶段的图像（路径），默认颜色是黑色；

//空心三角形 var canvas=document.getElementById(“myCanvas”); var cxt=canvas.getContext(“2d”); cxt.beginPath(); cxt.moveTo(50,50); cxt.lineTo(100,50); cxt.lineTo(75,100); cxt.closePath();//填充或闭合需要先闭合路径才能画 cxt.strokeStyle=”red”; cxt.stroke(); //实心三角形 cxt.beginPath(); cxt.moveTo(150,50); cxt.lineTo(250,50); cxt.lineTo(200,150); cxt.closePath(); cxt.fillStyle=”#89E1BF” cxt.fill();

演示图

图1

七、采用Canvas绘制一个空心圆

arc()：创建弧或曲线（用作创建圆或部分圆）；

<body> <canvas id=”myCanvas” width=”200″ height=”200″ style=”border:1px solid #000;”> </body> <script type=”text/javascript”> var can=document.getElementById(“myCanvas”) var ctx=can.getContext(“2d”); //创建context对象 ctx.beginPath();//标志开始一个路径 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中绘制圆形 ctx.stroke() </script>

演示图

图2

八、绘制一个实心圆

<body> <canvas id=”myCanvas” width=”200″ height=”200″ style=”border:1px solid #000;”> </body> <script type=”text/javascript”> var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); ctx.beginPath(); ctx.arc(100,100,50,0,2*Math.PI); ctx.fillStyle=”#deffff”; ctx.fill(); ctx.strokeStyle=”red” ctx.stroke(); </script>

演示图

图3

九、绘制一个空心矩形

strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；

<body> <canvas id=”myCanvas” width=”300″ height=”300″ style=”border:1px solid #000;”> </body> <script type=”text/javascript”> var can=document.getElementById(“myCanvas”); //获得画板数据 var ctx=can.getContext(2d); //获得笔刷 ctx.strokeStyle=”blue”; //增设线条颜色 ctx.strokeRect(100,100,100,100); //线条画矩形 </script>

演示图

图4

十、绘制一个实心的矩形

fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；

<body> <canvas id=”myCanvas” width=”300″ height=”300″ style=”border:1px solid #000;”> </body> <script type=”text/javascript”> var can=document.getElementById(“myCanvas”);//获得画板数据 var ctx=can.getContext(2d); //获得笔刷 ctx.strokeStyle=”blue”; //增设线条颜色 ctx.fillStyle=”#ddedee”; //填充矩形 ctx.fillRect(100,100,100,100); ctx.strokeRect(100,100,100,100);//线条画矩形 </script>

演示图