定位，画布，BFC的使用



- 地图
- 画布
- BFC用法

地图  
1）判断浏览器是否支持地理定位navigator.geolocation，Geolocation是window.navigator下面的一个对象， 该对象提供了实现地理位置定位的接口。   

     if (navigator.geolocation)
            {
                alert('ok')
            }else{
                 alert('no')
            }  
2）getCurrentPosition(success,error,options)该方法是 实现地理定位的核心方法，该方法能够对获取到的 信息作出处理以及设置。   
A.success(position) 获取信息成功的回调函数  
B.error(errorcode)获取信息失败的回调函数  
C.options获取信息前可以按照你的需求来设置一些参数  
success(position) 获取信息成功的回调函数 
当成功获得信息的时候，会自动调用success函数，而 这个函数会自动生成一个包含返回地理信息的position 对象，如下：  
A.coords.latitude（纬度）   
B.coords.longitude（经度）   

     <p id="p1"></p>
    <button οnclick="getLocation()">click</button>
        <script type="text/javascript">
            var p1=document.getElementById("p1")
            var localtion=navigator.geolocation;
            function getLocation()
            {
              if (localtion)
               {
                    //支持
                   localtion.getCurrentPosition(showPostion)
                  }else{
                     p1.innerHTML="你的浏览器不支持地理定位";
                   }
            }
            function showPostion(postion){
              p1.innerText=postion.coords.latitude+" "+postion.coords.longitude;
            }
        </script> 

错误演示  

  <script type="text/javascript">
            var p1=document.getElementById("p1")
            var localtion=navigator.geolocation;
            function getLocation()
            {
              if (localtion)
               {
                    //支持
                   localtion.getCurrentPosition(showPostion,showError) //1:success 2:error
                  }else{
                     p1.innerHTML="你的浏览器不支持地理定位";
                   }
            }
            function showPostion(postion){
              p1.innerText=postion.coords.latitude+" "+postion.coords.longitude;
            }
            function showError(error){
                switch(error.code)
                {
                    case error.PERMISSION_DENIED:
                        p1.innerHTML="用户选择了不容许"
                        break;
                    case error.POSITION_UNAVAILABLE:
                        p1.innerHTML="连不上GPS卫星或者网络中断."
                        break;
                    case error.TIMEOUT:
                        p1.innerHTML="超时了 "
                        break;
                    case error.UNKNOWN_ERROR:
                        p1.innerHTML="未知错误"
                        break;
                }
            }
        </script>  

画布  
1）判断浏览器兼容问题    

        <canvas id="first"width="250" height="250" style="background-color:red;">
            你的浏览器不支持 Canvas 标签
        </canvas>   
判断语句（也可这样进行判断浏览器的兼容问题） 

        var canvas = document.getElementById('first'); 
        if (canvas.getContext){ 
            alert("支持 <canvas> 标签"); 
        } else { 
            alert("不支持 <canvas> 标签"); 
        }

2）首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 "2d"  

        var canvas = document.getElementById('first');
        var ctx = canvas.getContext('2d');  
3） canvas元素绘制图像的时候有两种方法，分别是

        context.fill()//填充
        context.stroke()//绘制边框
 style:在进行图形绘制前，要设置好绘图的样式

        context.fillStyle//填充的样式
        context.strokeStyle//边框样式  
利用画布绘制矩形  

    var canvas1=document.getElementById("first");
    var cxt=canvas1.getContext("2d")
    cxt.fillStyle="red"
    cxt.fillRect(0,0,100,100)  
4）画一个圆  
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);  
这一共有 6 个参数. x 是圆心的横坐标, y 是圆心的纵坐标, radius 是半径, startAngle 是开始画圆的角度, endAngle 是结束画圆的角度, anticlockwise 是画圆方向。  
  如：100,100,30,0,Math.PI*2,true  
圆弧中心的坐标x和坐标y、圆弧半径、起始角度、终止角度、是否逆时针。  
弧长 Math.PI是半圆   
 Math.PI * 2是整个圆  0.5为四分之一  
例1

  var canvas = document.getElementById('first');
        var ctx=canvas.getContext("2d")
        ctx.fillStyle="red"
     //   ctx.beginPath();
        ctx.arc(100,100,30,Math.PI * -1 / 4, Math.PI * 3 / 4,true);
      // ctx.closePath();
        ctx.fill();  

 例2

 var canvas1=document.getElementById("first");
            var cxt=canvas1.getContext("2d")
            cxt.fillStyle="#FF0000";
            cxt.beginPath();
            cxt.arc(100,100,30,0,Math.PI*2,true);
            cxt.closePath();
            cxt.fill();

5）关于闭合路径的实验

 var canvas = document.getElementById('myCanvas');
                    var ctx=canvas.getContext("2d")
                    ctx.beginPath();
                    ctx.arc(100,100, 50, 0, Math.PI ,1);
                    ctx.closePath()
                    ctx.strokeStyle="red"
                    ctx.stroke();   

6）关于扇形    

 var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
                var startPoint=0;
                    ctx.fillStyle = "red";
                    ctx.beginPath();
                    ctx.moveTo(200,150);
                    ctx.arc(200,150,150,0,Math.PI/180*30,false);
                    ctx.closePath()
                    ctx.fill();

如：画一个折线 

 var canvas1=document.getElementById("first");
        var cxt=canvas1.getContext("2d")
        cxt.strokeStyle="red";
            cxt.beginPath();
             cxt.moveTo(10,10);
             cxt.lineTo(150,150)
            cxt.stroke()
            cxt.closePath()
            cxt.beginPath();
            cxt.moveTo(10,10);
            cxt.lineTo(150,250)
            cxt.stroke()
            cxt.closePath()

7）线性渐变  
context.createLinearGradient(x0,y0,x1,y1)  
介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。   
其中 .createLinearGradient(0,0,170,0)  
x0    渐变开始点的 x 坐标  
y0    渐变开始点的 y 坐标  
x1    渐变结束点的 x 坐标  
y1    渐变结束点的 y 坐标
 gradient.addColorStop("0","magenta");  
stop--介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。  
例1：  定义一个渐变（从上到下）作为矩形的填充样式：  

var c=document.getElementById("first");
            var ctx=c.getContext("2d");
            var my_gradient=ctx.createLinearGradient(0,0,0,170);
            my_gradient.addColorStop(0,"black");
            my_gradient.addColorStop(1,"white");
            ctx.fillStyle=my_gradient;
            ctx.fillRect(0,0,150,100);  

例2：定义一个从黑到红再到白的渐变，作为矩形的填充样式：  

var c=document.getElementById("first");
        var ctx=c.getContext("2d");
        var my_gradient=ctx.createLinearGradient(0,0,170,0);
        my_gradient.addColorStop(0,"black");
        my_gradient.addColorStop(0.5,"red");
        my_gradient.addColorStop(1,"white");
        ctx.fillStyle=my_gradient;
        ctx.fillRect(20,20,150,100);  

例3：通过多个 addColorStop() 方法来定义渐变： 

  var c=document.getElementById("first");
        var ctx=c.getContext("2d");
        
        var grd=ctx.createLinearGradient(0,0,170,0);
        grd.addColorStop(0,"black");
        grd.addColorStop("0.3","magenta");
        grd.addColorStop("0.5","blue");
        grd.addColorStop("0.6","green");
        grd.addColorStop("0.8","yellow");
        grd.addColorStop(1,"red");
        
        ctx.fillStyle=grd;
        ctx.fillRect(20,20,150,100);  

例4：  

 var c=document.getElementById("first");
            var ctx=c.getContext("2d");
            ctx.font="30px Verdana";
    // 创建渐变
            var gradient=ctx.createLinearGradient(0,0,c.width,0);
            gradient.addColorStop("0","magenta");
            gradient.addColorStop("0.5","blue");
            gradient.addColorStop("1.0","red");
    // 用渐变进行填充
            ctx.strokeStyle=gradient;
            ctx.strokeText("hello world!",10,50);  

8）scale()缩放   

 var c=document.getElementById("first");
            var ctx=c.getContext("2d");
            ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
            ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
            ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
            ctx.strokeRect(5,5,25,15); 

9）rotate——旋转  
语法：
context.rotate(angle);
ngle    
旋转角度，以弧度计。
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。  
举例：  
如需旋转 5 度，可规定下面的公式：5*Math.PI/180。  
度数----弧度  
Math.PI=180
Math.PI/180 ===1弧度  
5*Math.PI/180===5弧度  
如 将矩形旋转 20 度：//将矩形中心点旋转20度  

  var c=document.getElementById("first");
                var ctx=c.getContext("2d");
                ctx.rotate(20*Math.PI/180);
                ctx.fillRect(50,20,100,50);  

10）translate()平移   
context.translate(x,y)  
x-添加到水平x上的值  
y-添加到水平y上的值  

  var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d");
     ctx.fillRect(10,10,100,50); 
    ctx.translate(70,70);
     ctx.fillRect(10,10,100,50);  

**注意** :save()的意思是保存之前的状态，restore()之后就回到你save的那个时候的状态   

    var canvas1=document.getElementsByTagName("canvas")[0];
            var ctx=canvas1.getContext("2d")
            ctx.save();
            ctx.beginPath();
            ctx.rotate(30*Math.PI/180);
            ctx.fillRect(50,20,100,50);
            ctx.closePath();
            ctx.beginPath();
            ctx.restore();
            ctx.fillRect(60,70,100,50);
            ctx.closePath(); 

11）transform替换绘图的当前转换矩阵  
通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：  
ctx.transform(1,0.5,-0.5,1,30,10);   
a     水平缩放绘图  
b     水平倾斜绘图   
c     垂直倾斜绘图  
d     垂直缩放绘图  
e     水平移动绘图  
f     垂直移动绘图  
例：  

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

         ctx.fillStyle="yellow";
         ctx.fillRect(0,0,250,100)

         ctx.transform(1,0.5,-0.5,1,30,10);
         ctx.fillStyle="red";
         ctx.fillRect(0,0,250,100);

         ctx.transform(1,0.5,-0.5,1,30,10);
         ctx.fillStyle="blue";
         ctx.fillRect(0,0,250,100);

12） 渐变色创建文字  

 var canvas1=document.getElementById("first");
        var ctx=canvas1.getContext("2d")
        ctx.font="30px Verdana";
        var gradient=ctx.createLinearGradient(0,0,180,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");

        ctx.fillStyle=gradient;
        ctx.fillText("w3school.com.cn",10,90);  

13）关于图像  
var img = new Image();   // Create new Image object  
img.src = 'myImage.png'; // Set source path   
当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用 onload 事件：   

var ctx = document.getElementById('myCanvas').getContext('2d');
                 var img = new Image();
                 img.src = 'oneeye.jpg';
                 img.onload = function()
                 {
                     ctx.drawImage(img,0,0);
                     ctx.beginPath();
                 }
             }  

x     在画布上放置图像的 x 坐标位置。  
y     在画布上放置图像的 y 坐标位置。  
ctx.drawImage(img,0,0,200,200);  
width     可选。要使用的图像的宽度。（伸展或缩小图像）  
height     可选。要使用的图像的高度。（伸展或缩小图像）  

 var myImage=document.getElementById("myCanvas");
             var cxt=myImage.getContext("2d");
             var img=new Image();
             img.src="ji.png";
             img.onload = function()
             {
             cxt.drawImage(img,0,0,50,50);
             cxt.drawImage(img,30,30,50,50);
             cxt.drawImage(img,60,60,50,50);
             }

14）图像的剪贴  
img    规定要使用的图像、画布或视频。  
sx    可选。开始剪切的 x 坐标位置。  
sy    可选。开始剪切的 y 坐标位置。  
swidth    可选。被剪切图像的宽度。  
sheight    可选。被剪切图像的高度。  
x    在画布上放置图像的 x 坐标位置。  
y    在画布上放置图像的 y 坐标位置。  
width    可选。要使用的图像的宽度。（伸展或缩小图像）  
height    可选。要使用的图像的高度。（伸展或缩小图像）  
例： 

          var canvas1=document.getElementById("myCanvas")
               var ctx=canvas1.getContext("2d");
                var img=new Image();
                img.src='wode.gif'
               img.οnlοad=function(){
                ctx.drawImage(img,10,10,30,30,50,50,100,100);
               }  

BFC   
BFC 定义  
　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。    
 
BFC布局规则：  
1、内部的Box会在垂直方向，一个接一个地放置。  
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠  
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从 左往右的格式化，否则相反)。即使存在浮动也是如此。  
4、BFC的区域不会与float box重叠。  
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元      素。反之也如此。  
6、计算BFC的高度时，浮动元素也参与计算    
哪些元素会生成BFC?  
根元素  
float属性不为none  
position为absolute或fixed  
display为inline-block, table-cell, table-caption, flex,   inline-flex  
overflow不为visible  
例1 ：做一个侧边栏目但是被包含了  

 <div class="aside"></div>
    <div class="main"></div>
    
    .aside {
                width: 100px;
                height: 150px;
                float: left;
                background: #f66;
            }
            .main {
                height: 200px;
                background: #fcc;
            }
    ----------------------------------
    
    是不是出问题了呢？
            --触发BFC
       .main {
                height: 200px;
                background: #fcc;
                overflow: hidden;
            }  

例2：上边距重叠问题  

 .main{
                background-color: darkgrey;
                width: 700px;
            }
    .first{
                margin-top: 100px;
                width: 50px;
                height: 50px;
                background-color: #000000;
            }
            .second{
                width: 50px;
                height: 50px;
                background-color: blue;
            }
    
    <div class="main">
        <div class="first"></div>
        <div class="second"></div>
    </div>

margin-top: 100px;---这句话如果加上和没加有什么区别呢  ------------BFC的区域不会与float box重叠 用main触发BFC  
例3：影响别的元素  

.main{
                background-color: darkgrey;
                width: 700px;
            }
            .first{
                width: 50px;
                height: 50px;
                background-color: #000000;
            }
            .second{
                width: 50px;
                height: 50px;
                background-color: blue;
                margin-left: 800px;
            }  

当我们给main里边的元素设置了过多的值800px的时候,势必会印象外边的东西
当我们设置了BFC的时候，就不会发生这种情况-------------------BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素  
例4：文字围绕问题  

        .box {width:210px;border: 1px solid #000;float: left;}
            .img {width: 100px;height: 100px;background: #696;float: left;}
            .info {background: #ccc;color: #fff;}
    <div class="box">
        <div class="img">image</div>
        <p class="info">hello world</p>
    </div>
    当文字变多的时候会发生什么事情呢？
    我们发现，文字环绕了---这很忧伤
    这时候我们可以单独为P出发我们的BFC
      .info {background: #ccc;color: #fff;overflow: hidden}  

例5：float之后的元素没有撑开我们的盒子  

 <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
    
      .par {
                border: 5px solid #fcc;
                width: 300px;
            }
    
            .child {
                border: 5px solid #f66;
                width:100px;
                height: 100px;
                float: left;
            }
    
    发生了什么？float之后的元素没有撑开我们的盒子，而我们的原则，计算BFC的高度时，浮动元素也参与计算
     .par {
                border: 5px solid #fcc;
                width: 300px;
                overflow: hidden;
            }

    触发BFC  
例6：元素margin重叠     

   p {
                color: #f55;
                background: #fcc;
                width: 200px;
                line-height: 100px;
                text-align:center;
                margin: 100px;
            }
    <p>Haha</p>
    <p>Hehe</p>
    
    出问题了，BFC里边元素margin重叠了
    <p>Haha</p>
    <div class="wrap">
    <p>Hehe</p>
    </div>
     .wrap {
                overflow: hidden;
            }