一、什么是 HTML5?

  • HTML5 是最新的 HTML 标准;
  • HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件;
  • HTML5 拥有新的语义、图形以及多媒体元素;
  • HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建;
  • HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行;

二、HTML5的一些新特性

  • 用于绘画的 canvas 元素;
  • 用于媒介回放的 video 和 audio 元素;
  • 对本地离线存储的更好的支持;
  • 新的特殊内容元素,比如 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:如果出现该属性,则视频在页面加载时进行加载,并预备播放,如果使用 "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:如果出现该属性,则音频在页面加载时进行加载,并预备播放,如果使用 "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>

演示图
图5


Summer
83 声望9 粉丝

关于Python学习的一些小知识