定位，画布，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 onclick="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.onload=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;            }