HTML5---canvas | 地理定位

一、canvas绘图

1.向html5页面添加canvas元素

<canvas  id="canvas"></canvas>

2.设置画布大小

let canvas= document.getElementById("canvas");
//设置canvas 画布大小
canvas.width=800;
canvas.height=800;

3.创建一个2d对象

let context = canvas.getContext("2d");

4.绘制图形

绘制一个矩形
context.fillstyle="red";   //图形填充颜色
//fillRect(x1,y1,x2,y2);   x1,y1矩形起始点坐标，x2,y2矩形终止点坐标
context.fillRect(0,0,300,200);

绘制一条线
context.strokeStyle="red";   //线性颜色
context.moveTo(300,300);     //线条的起始点
context.lineTo(400,500);     //线条的终止点

绘制弧线的方法：

context.arcTo(x1,y1,x2,y2,radiu) 
x1,y1为圆弧的第一个控制点，x2,y2为第二个控制点，radiu为圆弧半径  

绘制一条弧线
context.strokeStyle="yellow";
context.moveTo(0,300);   //起始点 
context.arcTo(50,350,100,300,50);  
context.lineTo(100,300);  //终止点
context.stroke();

绘制圆弧的方法：

context.arc(x,y,radiu,startangle,endangle,anticlockwise)
x,y：圆心坐标，radiu：圆的半径，startangle：起始角度，endangle：终止角度；
anticlockwise值为true逆时针绘制,值为false顺时针绘制，默认false；

绘制一个圆弧
context.fillStyle="blue";
context.strokeStyle="black";
context.arc(300,300,50,0,Math.PI/2,false);
context.stroke();  //画线方法，会绘制线条颜色
context.fill();   //填充方法，会绘制填充的颜色

//最后一个参数为true时：
context.arc(300,300,50,0,Math.PI/2,false);//从0弧度的位置逆时针绘制到PI/2的位置

绘制圆形渐变
1.创建一个圆形渐变
createRadialGradient(x1,y1,r1,x2,y2,r2);
//x1,y1,r1初始圆的坐标及半径
//x2,y2,r2终止圆的坐标及半径
let gradient = context.createRadialGradient(500,500,0,500,500,100);

2.设置渐变颜色
addColorStop(area,color);
//area为设置的相对于起始位置的偏离区域

gradient.addColorStop(0,"blue");
gradient.addColorStop(0.2,"red");
gradient.addColorStop(0.4,"green");
gradient.addColorStop(0.6,"orange");
gradient.addColorStop(0.8,"yellow");
gradient.addColorStop(1,"pink");
context.fillStyle=gradient;
context.arc(500,500,100,0,Math.PI*2);
context.fill();

绘制图片的方法：

drawImage(image,x1,y1,width,height,cx1,cy1,cwidth,cheight);
x1,y1为图片的左上角起始坐标 width,height为设置图片的宽高，
cx1,cy2裁剪图片的左上角起始位置，cwidth,cheight为裁剪图片的宽高,相对于图片的初始大小而言

 var image = new Image();
 image.src="http://image.biaobaiju.com/uploads/20190728/18/1564309051-KvwmBxdSsn.jpg";
 context.drawImage(image,0,0,200,300);

在图片加载时进行裁剪—clip()

 var image = new Image();
    image.src="http://image.biaobaiju.com/uploads/20190728/18/1564309051-KvwmBxdSsn.jpg";
    //边绘制边裁剪  先绘路径 再用  clip()裁剪
    image.onload=function(){
        context.moveTo(50,100);
        context.lineTo(300,300);
        context.lineTo(100,300);
        context.lineTo(50,100);
        context.clip();
        context.drawImage(image,0,0);
     }

绘制文字
filltext(content,x,y);
content 文字内容，x,y为文字起始绘制坐标 
strokeText()用法同filltext()

  context.font = "4rem Arial";   //设置字体大小和样式
  //实心字 
  context.fillText("TEXT FILL",60,60);
  //空心字
  context.strokeText("TEXT FILL",60,60);

阴影相关属性：

shadowBlur      //阴影模糊大小
shadowColor     //阴影颜色
shadowOffsetX   //阴影X方向偏移
shadowOffsetY   //阴影Y方向偏移

save()与restore()的使用

var fontsize=13;
     var addsize=document.querySelector("#add");
    var decsize=document.querySelector("#dec");
    addsize.addEventListener("click",function(){
        context.clearRect(0, 0, 400, 400);
        context.save();   //存储当前字体大小及样式
        fontsize++;
        context.fillStyle="red";
        context.font=fontsize+"px Arial";
        context.fill();
        context.fillText("测试save和restore",50,50,300);
    })
    decsize.addEventListener("click",function(){
        context.clearRect(0,0,400,400);
        fontsize--;
        context.restore();   //弹出堆栈最上方的存储状态，并在此使用
        context.fillStyle="blue";
        context.fill();
        context.fillText("测试save和restore",50,50,300);
    })

transform()

transform(水平缩放，水平斜切，垂直斜切，垂直缩放，水平位移，垂直位移)

context.transform(1, 1, 0, 1, 0, 0);
context.fillRect(10, 20, 100, 100);

图片颜色拾取案例

getImageData(sx,sy,a,b);
sx,sy 当前点击位置的坐标
a,b 当前鼠标点击的位置1个单位内的像素信息

该方法返回的data值即为当前点击范围内颜色的rgb值

var img=new Image();
img.src="img/bg.jpg";
img.onload=function(){
        context.drawImage(this,0,0,800,500);
        canvas.addEventListener("click",function(e){ 
        //必须是给canvas添加监听事件，不能是img,页面只存在canvas一个页面dom
          var colorx = e.layerX;
          var colory = e.layerY;
          var layer = context.getImageData(colorx,colory,1,1).data;
          console.log(layer);   //layer前三个数据为颜色rgb值，第四个数为透明度
          var opacity= layer[3]/255;
          get.style.backgroundColor="rgba("+layer[0]+","+layer[1]+","+layer[2]+","+opacity+")";
        })
 }

二、地理定位

 var getlocation = document.querySelector("#getlocation");
    getlocation.onclick = function () {
        console.log(1);
        //检测浏览器是否支持定位
        if (navigator.geolocation) {
            //getCurrentPosition(getsuccess, error)
            //getsuccess为获取定位成功执行的回调函数
            //error为获取定位失败执行的回调函数 
            navigator.geolocation.getCurrentPosition(getsuccess, error);
        } else {
            console.log("该浏览器不支持地理定位");
        }
    }
    function getsuccess(position){
        console.log(position);
         /* accuracy：精确度
         latitude：纬度
         longitude：经度
         altitude：海拔
         altitudeAcuracy：海拔高度的精确度
         heading：朝向
         speed：速度
         * */
    }
    function error(err) {
        console.log(err);
        /* 1、message：错误信息
         *2、 code：错误代码。
         * */
    }