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>
IT文库 » HTML5的新特性–基础知识(4)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址