HTML5的新特性--基础知识（4）

1、伪类顺序:一般遵循如下顺序,在低版本中防止不兼容问题

    lvha

     a:link{}

     a:visited{}

     a:hover{}

     a:active{}

 2、<a href="javascript:playMusic('小苹果','music/1.mp3')">小苹果</a>

 3、当歌曲能够播放时，将时长显示在00:00处

 canplaythrough事件

 事件：是一种行为

 方法：是一个操作

 属性：是一种状态，可以得到基本的信息值

 canvas是HTML中出现的新标签，像所有dom一样，拥有自己的属性、方法和事件，其中就有绘图方法，js能够调用它在网页上完成绘图。canvas也是HTML5中最强大的特性之一。允许开发者使用动态和交互式可视化方法在web上实现桌面应用程序的功能。

 在使用<canvas>元素时，要调用getContext()方法，其目的是得到画布的绘图上下文。通过这个引用，就可以使用其他的API进行绘图操作。

 语法：

   function initial(){

    var elem=document.getElementById('canvas');

    var canvas=elem.getContext('2d');

   }

 该方法可以接受两个值，2d和3d，分别表示2维和3维

 在准备好canvas后，就可以创建和绘制实际图形了，API提供的工具非常广发，包括创建图形、颜色、文本等。API中的一些方法

 绘制矩形方法（生成基础形状方法）：

 fillRect(x,y,width,height)绘制实心矩形,x,y是左上角的点坐标，默认填充黑色

 strokeRect(x,y,width,height)：绘制矩形，没有填充颜色，只有个矩形框

 clearRect(x,y,width,height)：绘制一个清除区域的矩形，可以

 绘制步骤：

 1.在页面中添加<canvas>标签

 2.在js中获取canvas的上下文getContext()

 3.绘制图形

 例：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

   <script>

     window.onload=function(){

         //1.获取canvas元素

         var canvas=document.getElementById("canvas");

         //2.通过canvas元素获取绘图上下文

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

         //3.绘制各种各样的矩形

         ctx.fillRect(0,0,100,200); //绘制填充

         ctx.strokeRect(100,0,100,200);//绘制边框

         ctx.clearRect(0,0,200,100);//擦除指定区域

     }

   </script>

  </head>

  <body>

    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas

    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->

  </body>

 </html>

 canvas中实现颜色的方法：

 在创建图形时如果不设定颜色，那么所有图形都会使用默认颜色-纯黑色。设置颜色需要在先上色再画图形。

 可以通过以下属性指定绘图颜色：

 -strokeStyle:声明形状线条的颜色

 -fillStyle:声明形状内部区域的颜色。除了可以设置填充颜色，也可以设置填充内容，比如指定其他图像。

 -globalAlpha：透明度属性。可以设置画布上图形的透明度。

 渐变：

 canvas支持的渐变效果包括线性渐变或射线渐变，并且支持支持设置颜色转折点

 语法：

 createLinearGradient(x1,y1,x2,y2):在画布上创建一个渐变对象

 createRadialGradient(x1,y1,x2,y2):使用两个圆形在画布上创建一个渐变对象

 addColorStop(position,color):指定渐变颜色值,position取值为0~1之间

 例：

 var gra=ctx.createLinearGradient(0,150,400,150);

 gra.addColorStop(0,"red");

 gra.addColorStop(0.2,"yellow");

 gra.addColorStop(1,"blue");

 例1：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

   <script>

     window.onload=function(){

         //1.获取canvas元素

         var canvas=document.getElementById("canvas");

         //2.通过canvas元素获取绘图上下文

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

         //3.绘制各种各样的矩形

         ctx.fillRect(0,0,100,200); //绘制填充

         ctx.strokeRect(100,0,100,200);//绘制边框

         ctx.clearRect(0,0,210,100);//擦除指定区域

         //4.指定填充颜色

         ctx.strokeStyle="rgb(255,0,0)";

         ctx.fillStyle="rgba(0,0,255,0.3)";

         //5.重新绘制矩形

         ctx.strokeRect(300,0,100,200);//绘制边框

         ctx.fillRect(200,0,100,200); //绘制填充

     }

   </script>

  </head>

  <body>

    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas

    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->

  </body>

 </html>

 例2：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

    <script>

      window.onload=function(){

          var canvas=document.getElementById("canvas");

          ctx=canvas.getContext("2d");

          //1.创建渐变对象

          var gra=ctx.createLinearGradient(0,150,400,150);

          //2.指定渐变颜色

          gra.addColorStop(0,"red");

          gra.addColorStop(0.2,"yellow");

          gra.addColorStop(1,"blue");

          //3.通过渐变指定填充颜色

          ctx.fillStyle=gra;

          //4.绘制实心图形

          //ctx.fillRect(200,30,100,100);

          ctx.fillRect(0,0,400,300);

      }

    </script>

  </head>

  <body>

    <canvas id="canvas" width="400" height="300" ></canvas>

  </body>

 </html>

 创建路径：以上介绍的方法都是直接在画布上绘图，但是针对一些复杂图形的绘制，就需要自己通过路径进行描绘。路径就是画布移动的地图。

 方法：

 beginPath():开始一个新的形状描述。创建路径之前，必须先调用这个方法。

 closePath():关闭路径，用直线将最后一个点与原点相连，如果想保留开放路径，则不需要调用这个方法。

 默认情况下画完路径后看不到的，需要通过以下方式将路径显示出来：

 stroke():将路径绘制为轮廓形状

 fill():将路径绘制为实心形状。使用该方法时可以不用closePath关闭路径。该方法会通过直线连接最后一个点和第一个点实现关闭

 clip():上下文设置剪裁区域

 设置路径和创建真正的形状，有以下方法：

 moveTo():将笔触一道指定文字

 lineTo(x,y):从当前位置到指定位置(x,y)绘制一条直线

 rect(x,y,width,height):生成矩形路径

 arc(x,y,radius,startAngle,endAngle,direction):这里x,y是圆心位置，startAngle,endAngle要借助Math.PI来计算，是固定值，direction是画圆的方向，顺时针还是逆时针，是布尔类型，true表示逆时针，false表示顺时针。

 圆最右边的点弧度为0，是起始点，最左边的点弧度为Math.PI，是画半圆的终点。最下面的点弧度为Math.PI/2,最上面的点弧度为Math.PI*3/2,画整圆回到终点的时候，也就是起始位置,此时点的弧度为Math.PI*2

 例：画直角三角形

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

    <script>

      window.onload=function(){

          var canvas=document.getElementById("canvas");

          ctx=canvas.getContext("2d");

          //0.开始路径

          ctx.beginPath();

          //1.移动笔触到（180,50）

          ctx.moveTo(180,50);

          //2.从笔触位置到（180,50）连成一条直线

          ctx.lineTo(180,150);

          //3.从笔触（180,50）位置到（300,150）连成一条直线

          ctx.lineTo(300,150);

          //4.从笔触（300,150）到（180,50）连成一条直线

          ctx.lineTo(180,50);

          //5.闭合路径

          ctx.closePath();

          //6.填充或描边

          ctx.stroke();

      }

    </script>

  </head>

  <body>

    <canvas id="canvas" width="400" height="300" ></canvas>

  </body>

 </html>

 画半圆：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

    <script>

      window.onload=function(){

          var canvas=document.getElementById("canvas");

          ctx=canvas.getContext("2d");

          //0.开始路径

          ctx.beginPath();

          ctx.arc(200,150,50,0,Math.PI,true);

          ctx.stroke();

          ctx.closePath();

      }

    </script>

  </head>

  <body>

    <canvas id="canvas" width="400" height="300" ></canvas>

  </body>

 </html>

 画布方法：

 状态方法：

 save():保存当前画布属性、状态

 restore():恢复画布属性、状态，恢复状态到最近的保存点，不论点击多少次恢复的都是最近的保存状态

 转换方法：

 scale():缩放当前绘图更大或更小,通过ctx.scale(x,y)进行缩放，调用之前的画布内容不会发生改变，之后绘制的东西，全部按照指定的倍数，进行显示

 translate():重新映射画布上的(0,0)位置.canvas的默认原点为(0,0)，通过设置translate(25,25)，原点则为(25,25)。此后再绘制ctx.fillRect(0,0,100,100)实际效果从(25,25)开始显示，如果又设置了translate(25,25)，此时原点变为(50,50)，因为translate(25,25)是在原来原点基础上加上新设置的值

 rotate():旋转当前画布，公式为degrees*Math.PI/180

 例：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

   <script>

     window.onload=function(){

         var canvas=document.getElementById("canvas");

         ctx=canvas.getContext("2d");

     }

     //绘制UI个矩形轮廓

     function btn_drawRect(){

         ctx.strokeRect(0,0,100,100);

     }

     //将显示效果扩大两倍

     function btn_scale(){

         //通过ctx.scale(x,y)进行缩放，调用之前的画布内容不会发生改变，之后绘制的东西，全部按照指定的倍数，进行显示

         //x=1,y=1,表示原始大小

         //x<1,y<1,表示缩小倍数

         //x>1,y>1，表示扩大倍数

         ctx.scale(2,2);//扩大两倍

     }

     //更换原点，每次点击，在原来的基础上向右下移动25的距离

     function btn_translate(){

         ctx.translate(25,25);

     }

     //将画布按顺时针方向旋转指定的度数

     //度数：degree*Math.PI/180;

     function btn_rotate(){

         ctx.rotate(45*Math.PI/180);

     }

     //保存画布当前状态

     function btn_save(){

         ctx.save();

     }

     //恢复画布状态到最近保存点

     function btn_restore(){

         ctx.restore();

     }

   </script>

  </head>

  <body>

    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas

    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->

    <br/>

    <input type="button" value="绘制矩形" onclick="btn_drawRect()" />

    <input type="button" value="扩大2倍" onclick="btn_scale()" />

    <input type="button" value="更换原点" onclick="btn_translate()" />

    <input type="button" value="旋转45度" onclick="btn_rotate()" />

    <input type="button" value="保存画布当前状态" onclick="btn_save()" />

    <input type="button" value="恢复状态到最近的保存点" onclick="btn_restore()" />

  </body>

 </html>

 线型：到目前为止，所有画布都是用相同的线型，即默认线型

 lineWidth:修改线条粗细

 lineCap:指定线条端点形状，支持的值有butt(向线条的每个末端添加平直的边缘)、round（向线条的每个末端添加圆形线帽）、square（向线条的每个末端添加正方向线帽），注意：round和square会使线条略微变微长

 lineJoin两根线连接的点的形状：round（创建圆角）、bevel（创建斜角）、miter（默认，创建尖角）

 miterLimit：与lineJoin一起使用，表示交点的延伸范围

 例：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

   <script>

     window.onload=function(){

         var canvas=document.getElementById("canvas");

         ctx=canvas.getContext("2d");

         //1、绘制普通的线段从(80,50),绘制(250,50)

         ctx.beginPath();

         ctx.moveTo(80,50);

         ctx.lineTo(250,50);

         ctx.closePath();

         ctx.stroke();

         //2.绘制一条宽度为10的线段(80,70)绘到(250,70)

         ctx.beginPath();

         ctx.moveTo(80,70);

         ctx.lineWidth="10";

         ctx.lineTo(250,70);       

         ctx.closePath();

         ctx.stroke();

         //3.绘制一条宽度为10的线段(80,90),(250,90)，线端使用圆帽(ctx.lineCap="round")

         ctx.beginPath();

         ctx.moveTo(80,90);

         ctx.lineWidth="10";

         ctx.lineCap="round"; //圆帽

         //ctx.lineCap="square";  方形

         ctx.lineTo(250,90);       

         ctx.stroke();//添加了圆帽后要先画再闭合

         ctx.closePath();

         //绘制两条线，形成锐角

         ctx.beginPath();

         ctx.lineWidth="10";

         ctx.lineJoin="bevel";

         //ctx.lineJoin="round";

         ctx.moveTo(80,100);

         ctx.lineTo(100,150);

         ctx.lineTo(100,100);

         ctx.stroke();

         ctx.closePath();

     }   

   </script>

  </head>

  <body>

    <canvas id="canvas" width="400" height="300" style="border:1px solid #999;">您的浏览器不支持Canvas

    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的--> 

  </body>

 </html>

 视频最后没有结束

 绘制八卦图：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

   <script>

     window.onload=function(){

         var canvas=document.getElementById("canvas");

         ctx=canvas.getContext("2d");

         ctx.beginPath();

         ctx.arc(250,250,200,0,Math.PI*2,true);

         ctx.stroke();

         ctx.closePath();

         ctx.beginPath();

         ctx.arc(250,250,200,Math.PI*3/2,Math.PI/2,true);

         ctx.fill();

         ctx.closePath();

         ctx.beginPath();

         ctx.arc(250,150,100,Math.PI*3/2,Math.PI/2,true);

         ctx.fillStyle="white";

         ctx.fill();

         ctx.closePath();

         ctx.beginPath();

         ctx.arc(250,350,100,Math.PI*3/2,Math.PI/2,false);

         ctx.fillStyle="black";

         ctx.fill();

         ctx.closePath();

         ctx.beginPath();

         ctx.arc(250,150,20,0,Math.PI*2,true);

         ctx.fillStyle="black";

         ctx.fill();

         ctx.closePath();

         ctx.beginPath();

         ctx.arc(250,350,20,0,Math.PI*2,true);

         ctx.fillStyle="white";

         ctx.fill();

         ctx.closePath();

     }   

   </script>

  </head>

  <body>

    <canvas id="canvas" width="500" height="500" style="border:1px solid #999;">您的浏览器不支持Canvas

    </canvas><!--canvas里面的文字能看到的话就说明浏览器不支持<canvas>,如果看不见就说明支持的-->

  </body>

 </html>