快站科技,普通二本软件工程薪水,公司注册网站模板,动画片制作教程HTML5 简介
HTML5 是下一代 HTML 标准。
HTML5在HTML4.01的基础上新增了一些特性#xff0c;从而可以让我们能够更快捷更方便的开发应用#xff0c;同时去掉了一些 “糟粕”。
现在的主流浏览器基本都支持HTML5。 在一个HTML5 文档中的第一行#xff0c;我们需要使用…HTML5 简介
HTML5 是下一代 HTML 标准。
HTML5在HTML4.01的基础上新增了一些特性从而可以让我们能够更快捷更方便的开发应用同时去掉了一些 “糟粕”。
现在的主流浏览器基本都支持HTML5。 在一个HTML5 文档中的第一行我们需要使用!doctype 进行声明。
!DOCTYPE html
!-- 声明当前的文档遵循HTML5规范 --HTML5 Canvas(画布) canvas是HTML5中的新元素使用它我们就可以在页面上绘制图像了。
canvas标签定义的只是图形的容器或者说只是一块空白的画布。图形的具体绘制通常是通过JavaScript完成。
创建画布Canvas
width 和 height 属性定义的画布的大小。添加id是为了方便获取画布对应的这个DOM对象。
canvas idmyCanvas width200 height100/canvas使用JavaScript绘制图像 获取画布
var cdocument.getElementById(myCanvas);
//获取canvasDOM2.获取context
var ctxc.getContext(2d);
//生成的上下文对象里面包含多种绘制图形的方法理解Canvas画布坐标 canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
绘制图形 绘制路径 绘制路径 moveTo();------起点坐标 lineTo();------终点坐标 closePath();------关闭路径有两种可以使用closePath() 可以用lineTo() 定义到起点 fillStylered;------填充颜色默认没有颜色 strokeStyle();------更改颜色默认黑色 fill();------绘制路径默认没有颜色可以使用fillStyle“red“设置 stroke();------绘制路径默认黑色 lineWidth 2;------路径的宽度 beginPath();------用在一个路径结束开始下一个路径的时候可以设置 lineCap butt ------ 指定末端样式 默认buttround半圆 square正方形 lineJoinbevel 交点处样式bevel斜面 round圆弧 miter尖角 setLineDash([15,5]) :虚线数组中的参数第一个线段的长度第二个参数间隔长度 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width500px height560px/canvasscript// 获取画布var c document.getElementById(myCanvas);// 获取contextvar ctx c.getContext(2d);// 定义起点ctx.moveTo(0,0);ctx.lineTo(100,200);ctx.lineTo(380,420)// 关闭路径有两种方式可以使用closePath也可以使用lineTo00回到原点ctx.lineTo(0,0)// ctx.closePath();// fill默认都是没有颜色的需要设置颜色 stroke 默认黑色// fill() :是填充颜色 stroke是实线// 设置颜色fillStyle red 或者 strokeStyle redctx.fillStyle red;ctx.fill();// ctx.strokeStyle green;// ctx.stroke();/script
/body
/html 绘制图形_设置线型(一)
指定线条宽度默认宽度是1px
ctx.lineWidth10指定线条末端样式
ctx.lineCaptype butt默认值末端为矩形 round末端为圆形突出 square末端为矩形突出
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width500px height560px/canvasscript// 获取画布var c document.getElementById(myCanvas);// 获取contextvar ctx c.getContext(2d);// 开始新的路径ctx.beginPath();// 定义一条实线ctx.moveTo(0,100);ctx.lineTo(1000,100);ctx.lineWidth 2;ctx.strokeStyle red;ctx.stroke();// 开始新的路径ctx.beginPath();// 定义起点ctx.moveTo(100,100);ctx.lineTo(100,400);// 路径宽度ctx.lineWidth 10;// 末端样式ctx.lineCap buttctx.strokeStyle green;ctx.stroke();ctx.beginPath();ctx.moveTo(200,100);ctx.lineTo(200,400);ctx.lineWidth 10;// 末端样式ctx.lineCap roundctx.strokeStyle green;ctx.stroke();ctx.beginPath();ctx.moveTo(300,100);ctx.lineTo(300,400);ctx.lineWidth 10;// 末端样式ctx.lineCap squarectx.strokeStyle green;ctx.stroke();/script
/body
/html 绘制图形_设置线型(二) 指定线段交点的样式 ctx.lineJointype miter默认值交点填充为多边形尖角bevel交点填充为三角形斜面round交点填充为扇形圆弧
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width500px height560px/canvasscript// 获取画布var c document.getElementById(myCanvas);// 获取contextvar ctx c.getContext(2d);// 路径宽度ctx.lineWidth 20;// 颜色ctx.strokeStyle red;// 开始新路径ctx.beginPath();// 定义起点ctx.moveTo(100,100);ctx.lineTo(200,250);ctx.lineTo(100,400);// 交点样式ctx.lineJoin bevel;ctx.stroke();// 开始新路径ctx.beginPath();// 定义起点ctx.moveTo(200,100);ctx.lineTo(300,250);ctx.lineTo(200,400);// 交点样式ctx.lineJoin round;ctx.stroke();// 开始新路径ctx.beginPath();// 定义起点ctx.moveTo(300,100);ctx.lineTo(400,250);ctx.lineTo(300,400);// 交点样式ctx.lineJoin miterctx.stroke();/script
/body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width500px height560px/canvasscript// setLineDash([15.5]) : 设置成虚线// 获取画布var c document.getElementById(myCanvas);// 获取contextvar ctx c.getContext(2d);// 路径宽度ctx.lineWidth 8;// 颜色ctx.strokeStyle red;// 开始新路径ctx.beginPath();// 定义起点ctx.moveTo(100,100);ctx.lineTo(100,400);// 虚线数组中的参数第一个线段的长度第二个参数间隔长度ctx.setLineDash([15,10])ctx.stroke();/script
/body
/html 绘制矩形 rect(x,y,width,height) // 获取canvas
var c document.getElementById(myCanvas);
// 获取上下文
var ctx c.getContext(2d); // 第一种 // 起点坐标ctx.moveTo(50,50);// 右上角坐标ctx.lineTo(200,50);// 右下角坐标ctx.lineTo(200,300);// 左下角坐标ctx.lineTo(50,300);// 关闭路径ctx.closePath();// 绘制路径ctx.stroke(); // 第二种// rect(x,y,width,height):// x原点横坐标y原点纵坐标width矩形宽度 height矩形高度ctx.rect(50,50,150,250);ctx.stroke(); // 第三种// rect(x,y,width,height):// x原点横坐标y原点纵坐标width矩形宽度 height矩形高度ctx.strokeRect(50,50,150,250);// 第四种// rect(x,y,width,height):// x原点横坐标y原点纵坐标width矩形宽度 height矩形高度ctx.fillRect(50,50,150,250);clearRect()指定矩形区域的像素都变成透明。如下 // 指定区域透明ctx.clearRect(80,80,80,80); 绘制图形_绘制弧线
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x圆心横坐标y圆心纵坐标radius圆的半径startAngle扇形的起始角度endAngle扇形的终止角度anticlockwise可选逆时针画true顺时针画falsecanvas idmyCanvas width1600 height1600/canvas
script// 获取canvas
var c document.getElementById(myCanvas);
// 获取上下文
var ctx c.getContext(2d);ctx.lineWidth 3;
ctx.strokeStyle green;/script // 绘制一个圆ctx.arc(100,100,50,0,2*Math.PI);ctx.stroke(); // 绘制上半个圆ctx.beginPath();ctx.arc(260,100,50,0,Math.PI,true);ctx.closePath();ctx.stroke(); // 绘制下半个圆ctx.beginPath();ctx.arc(400,100,50,0,Math.PI,false);ctx.closePath();ctx.stroke();// 绘制同心圆ctx.beginPath();ctx.arc(600,100,50,0,2*Math.PI);ctx.strokeStyle orange;ctx.stroke();ctx.beginPath();ctx.arc(600,100,80,0,2*Math.PI);ctx.strokeStyle orange;ctx.stroke(); 练习绘制奥运五环 // 绘制奥运五环// 第一个环ctx.beginPath();ctx.arc(200,400,100,0,2*Math.PI);ctx.lineWidth 10;ctx.strokeStyle blue;ctx.stroke();// 第二个环ctx.beginPath();ctx.arc(430,400,100,0,2*Math.PI);ctx.lineWidth 10;ctx.strokeStyle black;ctx.stroke()// 第三个环ctx.beginPath();ctx.arc(660,400,100,0,2*Math.PI);ctx.lineWidth 10;ctx.strokeStyle red;ctx.stroke()// 第四个环ctx.beginPath();ctx.arc(314,515,100,0,2*Math.PI);ctx.lineWidth 10;ctx.strokeStyle yellow;ctx.stroke()// 第五个环ctx.beginPath();ctx.arc(545,515,100,0,2*Math.PI);ctx.lineWidth 10;ctx.strokeStyle green;ctx.stroke() 绘制图形_绘制文本 ctx.fillText(text, x, y [, maxWidth])在指定位置绘制实心文本 ctx.strokeText(text, x, y [, maxWidth])在指定位置绘制空心文本 text所要填充的字符串。 x文字起点的横坐标。 y文字起点的纵坐标。 maxWidth文本的最大像素宽度。该参数可选如果省略则表示宽度没有限制。如果文本实际长度超过这个参数指定的值那么浏览器将尝试用较小的字体填充。
var ctx document.getElementById(myCanvas).getContext(2d);ctx.fillText(hello,100,100);ctx.strokeText(world,200,200) fillText()方法 不支持文本断行所有文本一定出现在一行内。 如果要生成多行文本只有调用多次fillText()方法 ctx.fontfont-weight font-size font-family设置文本字体样式。
默认情况下文本是10px大小、sans-serif字体。
ctx.font30px Verdana//字体大小为30px,字体类型为Verdana
ctx.fillText(hello, 50, 50);
ctx.textAligntype指定文本的水平对齐方式
ctx.textAligncenter//居中对齐ctx.textBaselinetype指定文本的垂直位置
ctx.textBaselinebottom//基线在底端!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width1000 height1000/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 定义一条垂直线ctx.beginPath();ctx.moveTo(100,100);ctx.lineTo(100,1000);ctx.lineWidth 1;ctx.strokeStyle red;ctx.stroke();// 定义一条水平线ctx.beginPath();ctx.moveTo(100,200);ctx.lineTo(1000,200);ctx.lineWidth 1;ctx.strokeStyle red;ctx.stroke();ctx.beginPath();// 设置字体样式ctx.font 30px Verdana;// 字体水平对齐start /end /left /right /centerctx.textAlign center// 绘制实心字体第一个参数需要绘制的字符串第二个参数文字起点的横坐标第三个参数纵坐标开始的位置ctx.fillText(hello,100,100);ctx.beginPath();// 设置字体样式ctx.font 30px Verdana;// 字体垂直对齐top /bottom /middle /aiphabetic /hangingctx.textBaseline top;// 绘制空心字体第一个参数需要绘制的字符串第二个参数文字起点的横坐标第三个参数纵坐标开始的位置ctx.strokeText(world,200,200)/script
/body
/html 绘制图形_定义线性渐变色 ctx.createLinearGradient(x0, y0, x1, y1)定义渐变线的起点终点确定颜色渐变方向返回一个CanvasGradient对象 x0是起点的横坐标y0是起点的纵坐标x1是终点的横坐标y1是终点的纵坐标 CanvasGradient.addColorStop(num,color)指定渐变点的颜色 num第一个参数是0到1之间的一个数字代表渐变点的位置0表示起点1表示终点color表示该渐变点的颜色 使用定义好的渐变色。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width1000 height1000/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 定义渐变的起点和方向通过坐标来控制var grd ctx.createLinearGradient(100,300,300,100);// 渐变点的颜色 // .addColorStop(num,color)// num是从0 -- 1之间grd.addColorStop(0,red);grd.addColorStop(0.5,yellow);grd.addColorStop(1,pink);// 填充的颜色就是渐变的颜色ctx.fillStyle grd;// 填充矩形ctx.fillRect(100,100,300,300);/script
/body
/html 绘制图形_定义辐射渐变色 ctx.createRadialGradient(x0, y0, r0,x1, y1,r1)定义渐变线的起点终点确定颜色渐变方向返回一个CanvasGradient对象 x0是辐射起始的圆的圆心横坐标y0是辐射起始的圆的圆心纵坐标r0是起始圆的半径x1是辐射终止的圆的圆心横坐标y1是辐射终止的圆的圆心纵坐标r1是终止圆的半径 CanvasGradient.addColorStop(num,color)指定渐变点的颜色 num第一个参数是0到1之间的一个数字代表渐变点的位置0表示起点1表示终点color表示该渐变点的颜色 使用定义好的渐变色。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width1000 height1000/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 定义渐变的起点和方向通过坐标来控制var grd ctx.createRadialGradient(150,150,50,150,150,100);// 渐变点的颜色 // .addColorStop(num,color)// num是从0 -- 1之间grd.addColorStop(0,red);grd.addColorStop(0.4,yellow);grd.addColorStop(0.6,green);grd.addColorStop(0.8,orange);grd.addColorStop(1,pink);// 填充的颜色就是渐变的颜色ctx.fillStyle grd;// 填充矩形// ctx.fillRect(50,50,200,200);ctx.arc(150,150,110,0,2*Math.PI)ctx.fill();/script
/body
/html 绘制图形_使用图像着色 ctx.createPattern(img,repeatType)定义图像样式返回值是一个CanvasPattern对象。 img是图像数据它可以是img元素也可以是另一个canvas元素。 repeatType设置图片重复方式有四个可能的值分别是repeat双向重复、repeat-x(水平重复)、repeat-y(垂直重复)、no-repeat(不重复)。如果是空字符串或null则等同于repeat。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width1600px height1600px/canvascanvas idcanvas1 width1600px height1600px/canvasscriptvar ctx1 document.getElementById(canvas1).getContext(2d);var grd ctx1.createRadialGradient(500,500,300,500,500,500);grd.addColorStop(0.2,red);grd.addColorStop(0.4,yellow);grd.addColorStop(0.6,orange);grd.addColorStop(0.8,green);grd.addColorStop(1,pink);ctx1.fillStyle grd;ctx1.fillRect(0,0,1000,1000)// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 创建imgvar img new Image();// 设置图片加载的路径img.src ./1.jpg;// 图片加载完成回调img.onload function(){// 使用img创建图片样式var pattern ctx.createPattern(img,no-repeat);// 使用canvas创建图片样式// var pattern ctx.createPattern(document.getElementById(canvas1),no-repeat);// 填充样式为图片ctx.fillStyle pattern;// 绘制矩形// ctx.fillRect(0,0,1000,1000);// 圆ctx.arc(500,500,500,0,2*Math.PI);ctx.fill();}/script
/body
/html 绘制图形_绘制阴影 ctx.shadowColor阴影的颜色默认为black。 ctx.shadowOffsetX阴影的水平位移默认为00向右偏移0向左偏移。 ctx.shadowOffsetY阴影的垂直位移默认为00向下偏移0向上偏移。 ctx.shadowBlur阴影的模糊程度默认为0值越大模糊程度越高。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 阴影颜色ctx.shadowColor rgba(0,0,0,0.5);// 阴影水平位移ctx.shadowOffsetX 10;// 阴影垂直位移ctx.shadowOffsetY 10;// 模糊度ctx.shadowBlur 5;// 填充颜色ctx.fillStyle green;// 绘制矩形ctx.fillRect(10,10,200,200);ctx.strokeStyle green;ctx.strokeRect(300,300,200,200);/script
/body
/html 绘制图像 ctx.drawImage(img,x,y)用于将图像绘制到画布 img图像数据可以是img元素也可以是canvas元素x在目标 canvas 里放置图像的左上角的横坐标y在目标 canvas 里放置图像的左上角的纵坐标!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 绘制一个矩形ctx.fillStyle #660000;ctx.fillRect(20, 20, 500, 150);// 在画布上面绘画function draw(imgUrl, x, y) {// 定义imgvar img new Image();// img图片地址img.src imgUrl;// 图片加载完成回调img.onload function () {// 绘制画像// 第一个参数画像x开始绘画的横坐标y开始绘画的纵坐标ctx.drawImage(img, x, y);}}// 调用函数draw(./assets/2.jpg, 20, 20);draw(./assets/3.jpg, 170, 20);draw(./assets/4.jpg, 350, 20);/script
/body/html 缩放图像 ctx.drawImage(img, x, y, width, height) img图像数据可以是img元素也可以是canvas元素 x在目标 canvas 里放置图像的左上角的横坐标 y在目标 canvas 里放置图像的左上角的纵坐标 width图像在画布上的宽度 height图像在画布上的高度 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 定义图片var img new Image();// 图片地址img.src ./assets/2.jpg;// 图片加载完成回调img.onload function(){// 绘制 未 放大之前的图片// ctx.drawImage(img,0,0);// 绘制 放大 之后的图片// img图片 0开始绘制的横坐标0开始绘制的纵坐标// 200放大的宽度 200放大的高度ctx.drawImage(img,0,0,200,200);}/script
/body
/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);function draw(x, y) {// 定义图片var img new Image();// 图片地址img.src ./assets/2.jpg;// 图片加载完成回调img.onload function () {// 绘制 未 放大之前的图片// ctx.drawImage(img,0,0);// 绘制 放大 之后的图片// img图片 0开始绘制的横坐标0开始绘制的纵坐标 200放大的宽度 200放大的高度ctx.drawImage(img, x, y, 200, 200);}}// 让放大之后的图片平铺满整个画布使用for循环for (var i 0; i 3; i) {for (var j 0; j 3; j) {draw(i * 200, j * 200)}}/script
/body/html 绘制图像_图像切片 ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) img图像数据可以是img元素也可以是canvas元素· sx图像源被切的开始位置的横坐标 sy图像源被切的开始位置的纵坐标 sWidth图像源被切的宽度 sHeight图像源被切的高度 dx图像在画布的开始位置的横坐标 dy图像在画布的开始位置的纵坐标 dWidth图像在画布的宽度 dHeight图像在画布的高度 第一个参数和其它的是相同的都是一个图像或者另一个 canvas 的引用。 剩余的8个参数前4个是定义图像源的切片位置和大小后4个则是定义切片的目标显示位置和大小。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 定义imgvar img new Image();// img地址img.src ./assets/3.jpg;// 图片加载完成回调img.onload function(){// 绘画切片之前的图片ctx.drawImage(img,0,0);// 绘画切片之后的图像// img图像资源 // 30切片的横坐标30切片的纵坐标50切的宽度50切的高度// 100切后开始绘画的横坐标100切后开始绘画的纵坐标150切后绘画的宽度150切后绘画的高度ctx.drawImage(img,30,30,50,50,100,100,150,150);}/script
/body
/html Canvas状态的保存和恢复 ctx.save()将画布的当前状态保存起来相当于在内存之中产生一个样式快照 一个绘画状态包括 当前的一些样式strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline等 当前应用的变形即移动旋转和缩放 当前的裁切路径clipping path ctx.restore()将画布的样式恢复到之前保存的快照
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 绘制矩形ctx.fillRect(0,0,300,300);// 保存当前状态默认样式ctx.save();// 填充颜色ctx.fillStyle green;// 绘制矩形ctx.fillRect(30,30,240,240);// 保存当前样式状态ctx.save();// 填充颜色ctx.fillStyle #fff;// 绘制矩形ctx.fillRect(60,60,180,180);// 调用第二次保存的状态样式ctx.restore();ctx.fillRect(90,90,120,120);// 调用第一次默认样式状态ctx.restore();ctx.fillRect(120,120,60,60);/script
/body
/html 图形变形_平移 ctx.translate(x, y)
x 是左右偏移量x0向右平移x0向左平移y是上下偏移量y0向下平移y0向上平移!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);for(var i0;i2;i){for(var j0;j2;j){// 调用状态ctx.restore();// 保存默认状态ctx.save();// 平移ctx.translate(i*50,j*50);// 填充颜色ctx.fillStyle [green,orange][j];// 绘制矩形ctx.fillRect(0,0,20,20);}}/script
/body
/html
图形变形_旋转
ctx.rotate(angle)以原点为中心旋转 坐标系
angle旋转的角度(angle)它是顺时针方向的以弧度为单位的值。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 平移ctx.translate(100,100);for (var i 1;i7;i){// 开始新的路径ctx.beginPath();// 旋转60度180/360ctx.rotate(Math.PI/3);// 填充的颜色ctx.fillStyle [red,green,pink,orange,yellow,blue][i-1];// 绘制圆ctx.arc(0,30,10,0,2*Math.PI);ctx.fill();}/script
/body
/html 图形变形_缩放
图形变形_缩放 ctx.scale(x,y)用于缩放图像。
xx轴方向的缩放因子yy轴方向的缩放因子
默认情况下一个单位就是一个像素缩放因子可以缩放单位比如缩放因子0.5表示将大小缩小为原来的50%缩放因子10表示放大十倍。
如果缩放因子为1就表示图像没有任何缩放。
如果为-1则表示方向翻转。ctx.scale(-1, 1)为水平翻转ctx.scale(1, -1)表示垂直翻转。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 平移ctx.translate(100,200);// 保存默认状态ctx.save();// 填充颜色ctx.fillStyle green;// 绘制矩形ctx.fillRect(0,20,100,100);// 缩放缩小到原来的一倍ctx.scale(0.5,0.5);// 填充颜色ctx.fillStyle yellow;// 绘制矩形缩小了一倍想让是同一个原点020就需要在缩放后的坐标也变成0200.5*4020ctx.fillRect(0,40,100,100);// 绘制x轴坐标ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(600,0);ctx.fillStyle black;ctx.stroke()// 调用保存的状态ctx.restore();// 垂直翻转ctx.scale(1,-1);// 填充颜色ctx.fillStyle green;// 绘制矩形ctx.fillRect(0,20,100,100);// 缩放缩小到原来的一倍ctx.scale(0.5,0.5);// 填充颜色ctx.fillStyle yellow;// 绘制矩形缩小了一倍想让是同一个原点020就需要在缩放后的坐标也变成0200.5*4020ctx.fillRect(0,40,100,100);/script
/body
/html 图形变形_变形 ctx.transform(a, b, c, d, e, f)接受变换矩阵的六个元素作为参数完成缩放、平移和倾斜等变形。 ax轴方向缩放bx轴方向倾斜cy轴方向倾斜dy轴方向缩放ex轴方向平移fy轴方向平移 默认状态transform(1,0,0,1,0,0)
变换矩阵 a c e [ b d f ] 0 0 1
点x,y经过矩阵变换后得到(x,y)
x ax cy e;y bx dy f;ctx.setTransforma, b, c, d, e, f重置并创建新的变换矩阵ctx.resetTransform()重置当前变形为单位矩阵它和调用以下语句是一样的ctx.setTransform(1, 0, 0, 1, 0, 0);!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscriptvar ctx document.getElementById(myCanvas).getContext(2d);ctx.fillRect(0,0,100,100);// 缩放// ctx.transform(0.5,0,0,0.5,0,0);// 偏移// ctx.transform(1,0,0,1,50,50);// 倾斜// ctx.transform(1,1,0,1,0,0);// 综合变形ctx.transform(0.5,1,0,0.5,50,50);ctx.fillRect(0,300,100,100)// 重置并创建自己的变化矩阵ctx.setTransform(0.5,0,0,0.5,0,0);ctx.fillRect(0,500,100,100)/script
/body
/html
裁切路径
ctx.clip()将构建的路径转换为裁剪路径裁切路径确定好之后再绘制图形裁切路径内的图形可以显示裁切路径外的图形不显示。
默认情况下canvas 有一个与它自身一样大的裁切路径也就是没有裁切效果。 提示 裁切路径也属于canvas状态 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodycanvas idmyCanvas width600px height600px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 绘制一个矩形ctx.fillRect(0,0,100,100);// 绘制一个圆ctx.arc(50,50,30,0,2*Math.PI);// 裁切裁切后在区域范围内会显示之外的不显示ctx.clip();// 填充颜色ctx.fillStyle #CCFF66;// 绘制一个跟之前一样的矩形会覆盖之前绘制的矩形ctx.fillRect(0,0,100,100)/script
/body
/html 动画_时钟 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodycanvas idmyCanvas width150px height150px/canvasscript// 获取画布和上下文var ctx document.getElementById(myCanvas).getContext(2d);// 将原点移动到画布中心ctx.translate(75, 75);// 逆时针旋转90度是为了让时间刻度旋转从12点的位置开始ctx.rotate(-Math.PI / 2);// 末端样式ctx.lineCap round;// 保存状态ctx.save();// 因为设置了定时器一秒之后开始页面会出现以秒的空白所以这里调用一次clock();function clock() {// 因为每次都需要在原来的基础上绘制一次矩形所以可以第二次绘制的时候把第一次的删除 掉ctx.clearRect(-75, -75, 150, 150);// 填充颜色ctx.fillStyle pink;// 绘制跟画布一样大小的矩形因为之前将原点移到了中心绘制矩形的时候顶点坐标-75-75ctx.fillRect(-75, -75, 150, 150);// 获取当前时间var now new Date();// 绘制小时刻度// 线段宽度ctx.lineWidth 3;for (var i 0; i 12; i) {// 小时刻度之间是30度ctx.rotate(Math.PI / 6);ctx.beginPath();ctx.moveTo(68, 0);ctx.lineTo(75, 0);ctx.stroke();}// 绘制分钟刻度// 线段宽度ctx.lineWidth 2;for (var i 0; i 60; i) {if (i % 5 ! 0) {ctx.beginPath();ctx.moveTo(72, 0);ctx.lineTo(75, 0);ctx.stroke();}// 分钟之间是6度ctx.rotate(Math.PI / 30);}// 获取当前的时、分、秒var hor now.getHours();var min now.getMinutes();var sec now.getSeconds();// 三元运算符如果大于12点就减去12否则就是当前时间hor 12 ? hor - 12 : hor// 绘制时针// 调用之前保存的状态让其从12点的位置开始旋转ctx.restore();// 保存当前状态ctx.save();// 根据不同的时间时分秒的指向不同1210 和1230的指向不同hor ctx.rotate((Math.PI / 6) * (hor min / 60 sec / 3600));ctx.beginPath();ctx.lineWidth 5;// -10起点在原点的后面让其穿过原点ctx.moveTo(-10, 0);ctx.lineTo(40, 0),ctx.stroke();// 绘制分针// 调用之前保存的状态让其从12点的位置开始旋转ctx.restore();// 保存当前状态ctx.save();// 根据不同的时间时分秒的指向不同1210 和1230的指向不同min ctx.rotate((Math.PI / 30) * (min sec / 60));ctx.beginPath();ctx.lineWidth 4;// -10起点在原点的后面让其穿过原点ctx.moveTo(-10, 0);// 分针比时针长些ctx.lineTo(60, 0),ctx.stroke();// 绘制秒针// 调用之前保存的状态让其从12点的位置开始旋转ctx.restore();// 保存当前状态ctx.save();// 根据不同的时间时分秒的指向不同1210 和1230的指向不同sec ctx.rotate((Math.PI / 30) * sec);ctx.beginPath();ctx.lineWidth 2;// -10起点在原点的后面让其穿过原点ctx.moveTo(-10, 0);ctx.lineTo(60, 0),ctx.strokeStyle red;ctx.stroke();// 绘制时分秒针的交点ctx.beginPath();ctx.arc(0, 0, 5, 0, 2 * Math.PI);ctx.fillStyle #CC3333;ctx.fill();// 给秒针末端绘制空心圆ctx.beginPath();ctx.arc(65, 0, 5, 0, 2 * Math.PI);ctx.stroke();// 让秒针动起来调用之前保存的秒针状态ctx.restore()}setInterval(() {clock()}, 1000);/script
/body/html 动画_运动的小球 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodycanvas idmyCanvas height500px width500px/canvasscript// 获取画布和上下文var c document.getElementById(myCanvas)var ctx c.getContext(2d);var raf;// 定义小球的横坐标默认250var x 250;// 定义小球的纵坐标默认250var y 250;// 定义小球水平方向上的偏移量var stepX 5;// 定义小球垂直方向的偏移量var stepY 2;function draw() {// 每次都要重新绘制一次画布第二次开始的时候可以将第一次的删除ctx.clearRect(0, 0, 500, 500);ctx.strokeStyle block;ctx.strokeRect(0,0,500,500);// 绘制圆ctx.beginPath();ctx.arc(x, y, 20, 0, 2 * Math.PI);ctx.fillStyle red;ctx.fill();// 判断水平边界if (x 20 500 || x - 20 0) {stepX -stepX;}// 判断垂直边界if (y 20 500 || y - 20 0) {stepY -stepY;}// 水平和垂直方向的偏移量x stepX;y stepY;}function anim() {draw();// 浏览器重绘页面raf window.requestAnimationFrame(anim);}anim();// 添加鼠标监听事件小球随着鼠标移动c.addEventListener(mousemove,function(e){window.cancelAnimationFrame(raf);x e.offsetX;y e.offsetY;draw();})// 添加点击监听事件点击的时候小球绘制自由移动c.addEventListener(click,function(e){anim();})/script
/body/html 引入外部SVG SVG遵循 XML 标准用来定义可缩放矢量图形。 引入外部svg文件的方式 作为元素的背景图 #con {width:100px;height: 100px;background: url(./test.svg) no-repeat;}使用img引入 img srctest.svg alt 使用object引入 object datatest.svg typeimage/svgxml /!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#con{width: 200px;height: 200px;background: url(./test.svg) no-repeat;}/style
/head
body!-- 第一种 --div idcon/div!-- 第二种 --img src./test.svg alt!-- 第三种 --object data./test.svg typeimage/svgxml/object
/body
/html
HTML5内联SVG 在 HTML5 中我们能够将 SVG 元素直接嵌入 HTML 页面中
bodysvg id circle height 200 xmlnshttp://www.w3.org/2000/svg version1.1 circle id greencircle cx 30 cy 30 r 30 fill red / /svg/body也可以像操作HTML一样操作svg
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodybodysvg idcircle height200 xmlnshttp://www.w3.org/2000/svg version1.1circle idgreencircle cx30 cy30 r 30 fillred //svg/bodyscript// 增加一个点击的事件监听document.getElementById(greencircle).addEventListener(click,function(e){console.log(e);})/script/body/html
SVG_矩形 rect元素用来定义一个矩形 x 属性定义矩形的左上角顶点的横坐标 y 属性定义矩形的左上角顶点的纵坐标 width属性定义矩形的宽 height属性定义矩形的高度 style属性定义具体的样式 fill属性定义矩形的填充色stroke定义矩形的边框颜色stroke-width定义边框线条的宽度svg xmlnshttp://www.w3.org/2000/svg version1.1 width300 height300rect x50 y20 width150 height150 stylefill:blue;stroke:pink;stroke-width:5; //svgSVG 与 Canvas两者间的区别 SVG是通过 XML 绘制。 Canvas通过 js 绘制。 SVG绘制出来的每一个图形的元素都是独立的DOM节点能够方便的绑定事件或用来修改。 Canvas输出的是一整幅画布。 Canvas绘制的方式是通过 js 逐像素渲染的。也就是说它绘制一个复杂的图形和一个简单的图形的性能是差不多的。 SVG 是通过 XML 的方式渲染。它的本质是DOM而复杂的图形就会降低其渲染性能。 SVG输出的图形是矢量图形放大不会失真。 Canvas输出标量画布就像一张图片一样放大会失真。
方式绘制方式产出性能失真Canvasjs图形都属于完整的画布是一个整体高复杂度跟简单的图形性能差不多放大后会失真SVGXML每个图形都是独立的DOM节点复杂度高会减慢渲染速度放大后不会失真
HTML5_MathML MathML 是数学标记语言是一种基于XML的标准用来书写数学符号和公式的置标语言。
HTML5 可以在文档中使用 MathML 元素对应的标签是 math.../math 。
mrow....../mrow用于包裹一个或多个表达式可省略。msup....../msup用于包裹上标的表达式如指数函数。msub....../msub用于包裹下标的表达式。mi........./mi 用于包裹字符。mn........./mn用于包裹数字。mo.........../mo用于包裹各种运算符号。msqrt........../msqrt用于开根号。mfenced open[ close]........./mfenced 用于包裹矩阵即先定义外围的括号。mtable........../mtable 类似table。mtr........../mtr代表矩阵的行。mtd........./mtd: 代表每行的每一列。
MathML 实现一元二次方程 math xmlnshttp://www.w3.org/1998/Math/MathML!-- mrow:包裹一个或多个表达式 --mrowmrow!-- msup包裹上标的表达式 --msup!-- mi:包裹字符 --mix/mi!-- mn:包裹数字 --mn2/mn/msup!-- mo:包裹运算符 --mo/momrowmn4/mnmix/mi/mrowmo/momn4/mn/mrowmo/momn0/mn/mrow/mathHTML5_拖放Drag 和 Drop
拖放即抓取对象以后拖到另一个位置。在 HTML5 中拖放是标准的一部分任何元素都能够拖放。 定义可拖拽元素 添加 draggable 属性 true表示元素可以被拖拽false表示元素不可以被拖拽 添加事件处理程序属性ondragstart p idcon draggabletrue ondragstartdragstart(event)我是可拖拽内容
/p
scriptfunction dragstart(e){console.log(e)//打印事件对象}
/script定义拖拽数据
每个 drag event拖拽事件对象都有一个dataTransfer属性它持有拖拽数据。这个属性也有管理拖拽数据的方法。
setData(数据类型数据值)方法可以为拖拽数据添加一个项。 function dragstart(e){console.log(e)//打印事件对象// 添加拖拽数据e.dataTransfer.setData(text/plain, e.target.innerText);} 定义拖拽图像
dataTransfer.setDragImage(image, xOffset, yOffset) 方法自定义一张图片。 // 定义拖拽图片var img new Image();img.src ./拖放/assets/dog.jpg;function dragstart(e) {e.dataTransfer.setData(text/plain, e.target.innerText)console.log(e)// 设置拖拽图片e.dataTransfer.setDragImage(img, 10, 10);}定义放置区
当拖拽一个对象到 HTML 元素中时浏览器默认不会有任何响应。
想要让一个元素变成可放置区该元素必须设置 ondragover 和 ondrop 事件处理程序属性。
ondragover当元素被拖到放置区上时触发这个时候可以去检验拖拽数据的类型返回false则阻止放置返回true则允许放置。ondrop当元素在放置区被放置时触发。
h5放置区域/h5
div stylewidth:200px;height:200px;border:3px solid blue ondragoverdragover(event) ondropdrop(event)
/div
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp draggabletrue ondragstartdragstart(event)我是一个可以拖拽的文本/ph5放置区域/h5div stylewidth: 200px;height:200px;border:2px solid blueondragoverdragover(event) ondropdrop(event)/divscriptvar img new Image();img.src ./assets/4.jpg;function dragstart(e){console.log(e);// 设置拖拽数据e.dataTransfer.setData(text/plain,e.target.innerText);// 设置拖拽的图片e.dataTransfer.setDragImage(img,10,10);}function dragover(e){e.preventDefault();if(e.dataTransfer.types.includes(text/plain)){return true;// 允许放置}return false;// 不允许放置}function drop(e){e.preventDefault();// 获取拖拽的数据var data e.dataTransfer.getData(text/plain);e.target.innerText data;}/script
/body
/html HTML5_Web存储
使用HTML5可以在本地客户端存储数据。
客户端存储数据的两个对象为
localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储
调用其中任一对象会创建 Storage对象在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: if (typeof (Storage) ! undefined) {// 是的! 支持 localStorage sessionStorage 对象! // 写一些自己的逻辑
}else {// 抱歉! 不支持 web 存储。
}localStorage存储的数据没有时间限制 保存数据localStorage.setItem(key,value)或者localStorage.keyvalue 读取数据localStorage.getItem(key)或者localStorage.key 删除单个数据localStorage.removeItem(key) 删除所有数据localStorage.clear() 得到某个索引的keylocalStorage.key(index)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 判断localStorage 数据类型if(typeof(localStorage) ! undefined){// 如果条件成立代表支持localStorage// 给localStorage 设置内容localStorage.setItem(name,hengzhong);localStorage.setItem(age,20);// 获取设置的内容console.log(localStorage.getItem(name));console.log(localStorage.getItem(age));// 通过下标获得设置的内容localStorage.key(index)console.log(localStorage.key(0));console.log(localStorage.key(1));// 删除内容setTimeout(() {// 删除某个指定的// localStorage.removeItem(name);// 清空localStorage.clear()}, 3000);}else{// 抱歉不支持localStorage}/script
/body
/html
sessionStorage当用户关闭浏览器窗口后数据会被删除
保存数据sessionStorage.setItem(key,value)或者sessionStorage.keyvalue读取数据sessionStorage.getItem(key)或者sessionStorage.key删除单个数据sessionStorage.removeItem(key)删除所有数据sessionStorage.clear()得到某个索引的keysessionStorage.key(index)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 判断sessionStorage类型:if(typeof(sessionStorage) !undefined){// 条件成立代表支持sessionStorage存储// 设置存储数据sessionStorage.setItem(name,hengzhong);sessionStorage.setItem(age,18);// 获取存储数据// sessionStorage.getItem(key);// sessionStorage.key(index)console.log(sessionStorage.getItem(name));console.log(sessionStorage.getItem(age));console.log(sessionStorage.key(0));console.log(sessionStorage.key(1));setTimeout(() {// 删除存储的指定数据sessionStorage.removeItem(age);// 清空sessionStorage.clear();}, 3000);}else{// 条件不成立不可以web存储}/script
/body
/html
HTML5_webWorkers
Web Worker 的作用就是为 JavaScript 创造多线程环境允许主线程创建 Worker 线程将一些任务分配给它运行。
在主线程运行的同时Worker 线程在后台运行两者互不干扰。等到 Worker 线程完成计算任务再把结果返回给主线程。 检测浏览器是否支持 Web Worker if(typeof(Worker)!undefined){// 是的! Web worker 支持!}else{// //抱歉! Web Worker 不支持} 2. 创建 Web Worker 对象new Worker(脚本文件)
w new Worker(./demo_workers.js);3.定义worker具体任务
//worker.js
var i0
setInterval(function(){ii1postMessage(i)
},1000)4.worker发送接收消息 发送消息postMessage(消息) //worker.js
var i 0;
setTimeout(function(){ii1postMessage(i)//使用postMessage(数据)发送
},1000)添加onmessage事件监听器监听接收消息访问event.data获得消息 w.onmessage function (event) {document.getElementById(result).innerHTML event.data;};5.关闭worker
w.terminate(); Worker 线程无法读取本地文件即不能打开本机的文件系统file://它所加载的脚本必须来自网络。 在当前文件的路径下打开代码编辑器的终端安装npm i -g serve 安装完成之后输入serve 然后就可以访问端口了一般是localhost:3000 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv产出的结果是span idresult/span/divbutton onclickstopWorker()点击结束Worker/buttonscript// 判断Worker 类型if (typeof (Worker) ! undefined) {// 条件成立代表支持Workervar w;// 创建 Web Worker 对象new Worker(脚本文件)w new Worker(./worker.js);// 添加onmessage监听事件w.onmessage function (e) {document.getElementById(result).innerHTML e.data;}function stopWorker() {if (w) {// 关闭workerw.terminate();}}} else {// 浏览器不支持Worker}/script
/body/html
// worker.js
var i 0;setInterval(() {i 1;postMessage(i);
}, 1000); rem介绍 rem它就是一个css单位代表元素字体的大小指相对于根元素的字体大小的单位 根元素字体大小 html{font-size:16px
}设置其它元素大小 #box{width:10rem
}JS设置根元素字体大小
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box{width: 1rem;;height: 1rem;background-color: greenyellow;}/style
/head
bodydiv idbox/divscriptwindow.onload function(){document.documentElement.style.fontSize (document.documentElement.clientWidth / 750) * 100 px;}window.onresize function(){document.documentElement.style.fontSize (document.documentElement.clientWidth / 750) * 100 px;}/script
/body
/html rem应用
使用rem实现响应式布局如下效果 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{margin: 0;padding: 0;}.header{width: 100%;height: 0.99rem;display: flex;padding: 0 3.80rem;align-items: center;background-color: #eee;}.left{width: 1.68rem;height: 0.63rem;line-height: 0.63rem;}.left img{width: 100%;height: 100%;}.center{width: 5.8rem;height: .4rem;padding: 0.1rem 0.3rem;box-sizing: border-box;}.center input{display: block;width: 4.8rem;height: 0.4rem;border: 0.02rem solid #ff5000;padding-left: 0.4rem;border-radius: 0.4rem;}input:focus{outline: none;}.right{width: 0.99rem;height: 0.99rem;line-height: 0.99rem;}.right img{width: 100%;height: 100%;}/style
/head
bodyheader classheaderdiv classleftimg srchttps://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png alt/divdiv classcenterinput typetext placeholder输入搜索内容/divdiv classrightimg srchttps://gw.alicdn.com/imgextra/i4/O1CN01ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png alt/div/headerscriptwindow.onload function(){// 这里的1113就是你开发的时候所用设备的屏幕可以在控制台的console中通过window.innerWidht获得document.documentElement.style.fontSize (document.documentElement.clientWidth / 1113) * 100 px;}window.onresize function(){document.documentElement.style.fontSize (document.documentElement.clientWidth / 1113) * 100 px;}/script
/body
/html 百度地图_账号和获取密钥
百度地图提供了一套由JavaScript语言编写的应用程序接口该套接口目前最新版本为JavaScript API GL v1.0。
使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。
接口使用方法 注册百度账号 百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。https://lbsyun.baidu.com/ 申请成为百度开发者 获取服务密钥 使用服务相关功能
百度地图_初始化
引用百度地图API文件
script srchttps://api.map.baidu.com/api?v1.0typewebglak你的密钥/script创建地图容器元素
div idcontainer/div创建地图实例其参数可以是元素id也可以是元素对象
var map new BMapGL.Map(container);设置中心点坐标
var point new BMapGL.Point(116.404, 39.915);
//第一个参数为经度第二个参数为纬度地图初始化同时设置地图展示级别地图展示级别范围1-21
map.centerAndZoom(point, 15);
//第一个参数为中心点坐标第二个参数为地图级别开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/head
bodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true); /script
/body
/html
百度地图_变更地图类型 var map new BMapGL.Map(container)//生成地图实例var centerPointnew BMapGL.Point(116.404, 39.915)//设置地图的中心点map.centerAndZoom(centerPoint,1)//初始化地图map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放map.setMapType(BMAP_EARTH_MAP)//设置地图类型为地球百度地图_添加控件
控件是负责与地图交互的UI元素百度地图API支持比例尺、缩放、定位、城市选择列表、版权。 完成地图初始化 添加控件map.addControl(控件实例) 添加比例尺控件 var scaleCtrl new BMapGL.ScaleControl(); // 实例化比例尺控件
map.addControl(scaleCtrl);//添加比例尺控件添加缩放控件 var zoomCtrl new BMapGL.ZoomControl(); //实例化控件
map.addControl(zoomCtrl);// 添加缩放控件 添加城市列表控件 var cityCtrl new BMapGL.CityListControl(); //实例化控件
map.addControl(cityCtrl);// 添加城市列表控件 添加定位控件 var locationCtrlnew BMapGL.LocationControl()//实例化控件
map.addControl(locationCtrl)//添加定位控件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/head
bodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true); // 设置地图类型为地球// map.setMapType(BMAP_EARTH_MAP);// 添加控件// 添加比例尺var scaleCtr new BMapGL.ScaleControl();map.addControl(scaleCtr);// 添加缩放控件var zoomCtr new BMapGL.ZoomControl();map.addControl(zoomCtr);// 添加城市列表控件var cityLCtr new BMapGL.CityListControl();map.addControl(cityLCtr);// 添加定位控件var locationCtr new BMapGL.LocationControl();map.addControl(locationCtr);/script
/body
/html 百度地图_改变控件位置 控制控件位置 初始化控件时可提供一个可选参数是一个json对象里面有个属性anchor表示控件的停靠位置即控件停靠在地图的哪个角。当地图尺寸发生变化时控件会根据停靠位置的不同来调整自己的位置。 anchor值位置说明BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地图的右下角 var scaleCtrl new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})//实例化控件的时候可以传递一个可选参数为一个jsonmap.addControl(scaleCtrl) 控件位置偏移 除了指定停靠位置外还可以通过偏移量来指示控件距离地图边界有多少像素。 通过offset设置。 var scaleCtrl new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_RIGHT,//offset为一个Size的实例接受的俩个参数分别代表水平方向距离跟垂直方向距离offset:new BMapGL.Size(10,10)})
map.addControl(scaleCtrl)//添加比例尺控件!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/head
bodydiv idcontainer/divscript// 地图实列var map new BMapGL.Map(container);// //第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);// 滑轮滚动缩放map.enableScrollWheelZoom(true);// 地图样式// map.setMapType(BMAP_EARTH_MAP);// 添加控件// 添加比列尺var sc new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMapGL.Size(20,20)});map.addControl(sc);// 添加缩放控件var zc new BMapGL.ZoomControl();map.addControl(zc,);// 添加城市列表var clc new BMapGL.CityListControl();map.addControl(clc);// 添加定位控件var lc new BMapGL.LocationControl();map.addControl(lc);/script
/body
/html 百度地图_添加覆盖物
所有叠加或覆盖到地图的内容我们统称为地图覆盖物。 添加覆盖物map.addOverlay(覆盖物实例) 添加点标注点 使用的类Marker var point new BMapGL.Point(116.404, 39.915);
var marker new BMapGL.Marker(point); // 创建标注点
map.addOverlay(marker);// 将标注添加到地图中添加多边形 使用的类Polygon var polygon new BMapGL.Polygon([new BMapGL.Point(116.387112,39.920977),new BMapGL.Point(116.385243,39.913063),new BMapGL.Point(116.394226,39.917988),new BMapGL.Point(116.401772,39.921364),new BMapGL.Point(116.41248,39.927893)], {strokeColor:blue, strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);删除覆盖物map.removeOverlay(具体覆盖物实例)或者map.clearOverlays() var overlays map.getOverlays()//获取地图的所有覆盖物
map.removeOverlay(overlays[0])//删除对应的覆盖物
//map.clearOverlays()//删除地图上所有的覆盖物 监听覆盖物事件 overlay.addEventListener(事件名称callback) marker.addEventListener(click, function(e){ console.log(e)});!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container {width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/headbodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404, 39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point, 15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 创建标注点Markervar marker new BMapGL.Marker(point);map.addOverlay(marker);// 添加多边形Polygon)var polygon new BMapGL.Polygon([new BMapGL.Point(116.387112, 39.920977),new BMapGL.Point(116.385243, 39.913063),new BMapGL.Point(116.394226, 39.917988),new BMapGL.Point(116.401772, 39.921364),new BMapGL.Point(116.41248, 39.927893)], {strokeColor: blue,strokeWidth: 2,strokeOpacity: .5})map.addOverlay(polygon);// 删除覆盖物// map.clearOverlays();var overlays map.getOverlays();// 获取地图上所有覆盖物map.removeOverlay(overlays[0]);// 删除对应的覆盖物// 添加覆盖监听事件polygon.addEventListener(click,function(e){console.log(e);})/script
/body/html 百度地图_自定义标注图标 定义标注图标 Icon(url: String, size: Size , opts: IconOptions) url指定图标要使用的图片路径 size指定放置图标的区域大小 opts指定关于图标的位置的一些参数 var myIcon new BMapGL.Icon(markers.png,new BMapGL.Size(50, 50), //指定放置图标区域的大小{ //指定地理点跟图标左上角的相对偏移量anchor: new BMapGL.Size(10, 25),
}); 使用自定义的标注图标创建标注点
// 创建标注对象并添加到地图
var marker new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/head
bodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true); // 定义标注图标var myIcon new BMapGL.Icon(./marker.png,new BMapGL.Size(50,50),{anchor:new BMapGL.Size(25,70)});// 定义标注点var marker new BMapGL.Marker(point,{icon:myIcon});map.addOverlay(marker);/script
/body
/html 百度地图_添加文本标注 添加文本标注 使用的类Label var point new BMapGL.Point(116.404, 39.915);
var content label;
var label new BMapGL.Label(content, { // 创建文本标注position: point, // 设置标注的地理位置offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
})
map.addOverlay(label); 修改文本标注的样式 label.setStyle({ // 设置label的样式color: #000,fontSize: 30px,border: 2px solid #1E90FF
})
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/head
bodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true); // 添加文本标注var label new BMapGL.Label(BOSS,{position:point,offset:new BMapGL.Size(-20,-30)});map.addOverlay(label);// 设置样式label.setStyle({color:red,borderColor:transparent,backgroundColor:transparent})// 添加事件监听label.addEventListener(click,function(e){console.log(e);})/script
/body
/html 百度地图_正/逆地址解析 获取地址解析器 new BMapGL.Geocoder() 使用地址解析器 地址解析根据地址描述获得该位置的地理经纬度坐标 Geocoder.getPoint(具体地址,callback) // 创建地址解析器实例
var geocoder new BMapGL.Geocoder()
//通过具体地址获得该地址对应的地理位置的经纬度坐标并进行使用
geocoder.getPoint(北京市清华大学,function(p){console.log(p)map.centerAndZoom(p,15)var markernew BMapGL.Marker(p)map.addOverlay(marker)
},北京市)在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市。 逆地址解析根据经纬度坐标点获得该地点的地址描述 Geocoder.getLocation(Point,callback) map.addEventListener(click,function(e){console.log(e)//根据地理经纬度坐标获取具体地址信息geocoder.getLocation(e.latlng,function(result){console.log(result)})})
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/head
bodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true); // 创建地址解析器var geocoder new BMapGL.Geocoder();// 地址解析geocoder.getPoint(兰州交通大学,function(p){console.log(p);map.centerAndZoom(p,15);var marker new BMapGL.Marker(p);map.addOverlay(marker);},兰州市)// 逆地址解析map.addEventListener(click,function(e){console.log(e);geocoder.getLocation(e.latlng,function(result){var arr []var addr result.address result.businessarr.push(addr)arr.join()console.log(arr[0]);})})/script
/body
/html 百度地图_信息窗口 使用的类InfoWindow map.addEventListener(click, function (e) {geocoder.getLocation(e.latlng, function (result) {var str当前地址为result.address//实例化信息窗口var infowindow new BMapGL.InfoWindow(str, {width: 100,//信息窗口宽度height: 50,//信息窗口高度title: 提示//信息窗口标题})// 在地图上打开信息窗口map.openInfoWindow(infowindow, e.latlng)})})同一时刻只能有一个信息窗口在地图上打开
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container{width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/head
bodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404,39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point,15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true); // 创建地图解析实例var geocoder new BMapGL.Geocoder();// 添加事件监听点击哪里获得坐标map.addEventListener(click,function(e){console.log(e);// 逆向解析地图geocoder.getLocation(e.latlng,function(result){var str 当前地址是 result.address;// 信息窗口实列var infowindow new BMapGL.InfoWindow(str,{width:100,height:50,title:提示})map.openInfoWindow(infowindow,e.latlng);})})/script
/body
/html
百度地图_规划驾车路线 创建驾车导航实例 DrivingRoute(location,options) 使用实例发起检索 DrivingRoute.search(start,end)
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container {width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}#search {width: 1000px;margin: 0 auto;margin-bottom: 20px;}/style
/headbodydiv idsearchlabel for出发地input typetext idstart/labellabel for目的地input typetext idend/labelbutton idbtn搜索/button/divdiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404, 39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point, 15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 创建驾车导航的实例var driving new BMapGL.DrivingRoute(map,// 设置呈现结果{renderOptions: { map: map, autoViewPort: true },// 检索完成后回调函数onSearchComplate: function (result) {console.log(result);}})// 构建地址解析器var geocoder new BMapGL.Geocoder();var startPoint, endPoint;// 获取起点坐标document.querySelector(#start).onblur function (e) {geocoder.getPoint(e.target.value, function (p) {startPoint p;})}// 获取终点坐标document.querySelector(#end).onblur function (e) {geocoder.getPoint(e.target.value, function (p) {endPoint p;})}// 发起检索document.querySelector(#btn).onclick function () {driving.search(startPoint, endPoint)}/script
/body/html
百度地图_规划公交路线 创建公交导航实例 TransitRoute(location,options) 使用实例发起检索 TransitRoute.search(start,end) !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container {width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}#search{width: 1000px;margin: 0 auto;margin-bottom: 20px;}.result{width: 1000px;height: 20px;margin: 0 auto;margin-bottom: 20px;}/style
/headbodydiv idsearchlabel for出发地input typetext idstart/labellabel for目的地input typetext idend/labelbutton idbtn搜索/button/divdiv classresult/divdiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404, 39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point, 15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 创建公交导航的实例var transit new BMapGL.TransitRoute(map,// 设置呈现结果{renderOptions: { map: map, autoViewPort: true },// 检索完成后回调函数onSearchComplate: function (result) {console.log(result);var plan result.getPlan(0);var distance plan.getDistance(true);var duration plan.getDuration(true);document.querySelector(.result).innerHTML 总路程为distance ; 花费时间 duration;}})// 构建地址解析器var geocoder new BMapGL.Geocoder();var startPoint, endPoint;// 获取起点坐标document.querySelector(#start).onblur function (e) {geocoder.getPoint(e.target.value, function (p) {startPoint p;})}// 获取终点坐标document.querySelector(#end).onblur function (e) {geocoder.getPoint(e.target.value, function (p) {endPoint p;})}// 发起检索document.querySelector(#btn).onclick function () {transit.search(startPoint, endPoint)}/script
/body/html
百度地图_规划步行路线 创建步行导航实例 WalkingRoute(location,options) 使用实例发起检索 WalkingRoute.search(start,end) !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container {width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}#search {width: 1000px;margin: 0 auto;margin-bottom: 20px;}/style
/headbodydiv idsearchlabel for出发地input typetext idstart/labellabel for目的地input typetext idend/labelbutton idbtn搜索/button/divdiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404, 39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point, 15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 创建步行导航的实例var walking new BMapGL.WalkingRoute(map,// 设置呈现结果{renderOptions: { map: map, autoViewPort: true },// 检索完成后回调函数onSearchComplate: function (result) {console.log(result);}})// 构建地址解析器var geocoder new BMapGL.Geocoder();var startPoint, endPoint;// 获取起点坐标document.querySelector(#start).onblur function (e) {geocoder.getPoint(e.target.value, function (p) {startPoint p;})}// 获取终点坐标document.querySelector(#end).onblur function (e) {geocoder.getPoint(e.target.value, function (p) {endPoint p;})}// 发起检索document.querySelector(#btn).onclick function () {walking.search(startPoint, endPoint)}/script
/body/html
百度地图_定位 浏览器定位优先调用浏览器H5定位接口如果失败会调用IP定位 使用的类Geolocation // 创建定位实例var geolocation new BMapGL.Geolocation();//获取定位并传递回调函数geolocation.getCurrentPosition(function (r) {console.log(r)//判断返回的状态码是否为成功if (geolocation.getStatus() BMAP_STATUS_SUCCESS) {var mk new BMapGL.Marker(r.point);map.addOverlay(mk);//将地图的中心改为指定的点map.panTo(r.point);alert(您的位置 r.point.lng , r.point.lat);}else {alert(失败 geolocation.getStatus());}}); IP定位根据用户IP 返回城市级别的定位结果 使用的类LocalCity //创建ip定位实例var myCity new BMapGL.LocalCity();myCity.get(function(result){var cityName result.name;//设置地图中心点参数除了可以为坐标点以外还支持城市名map.setCenter(cityName);console.log(当前定位城市: cityName);});!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container {width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/headbodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404, 39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point, 15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 浏览器定位Geolocation创建定位实例var geolocation new BMapGL.Geolocation();// 获取定位并传递回调函数geolocation.getCurrentPosition(function (r) {console.log(r);// 判断返回的状态是否成功if (geolocation.getStatus() BMAP_STATUS_SUCCESS) {// 创建标注点var marker new BMapGL.Marker(r.point);map.addOverlay(marker);// 将地图的中心改为指定的点map.panTo(r.point);alert(您的位置 r.point.lat , r.point.lng)} else {alert(失败 geolocation.getStatus())}})// IP定位LocalCityvar mycity new BMapGL.LocalCity();mycity.get(function (r) {var cityName r.name;map.setCenter(cityName);console.log(当前定位城市: cityName);})/script
/body/html
百度地图_自定义视角动画
您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。 初始化地图 自定义关键帧 var keyFrames [{center: new BMapGL.Point(116.40396298757886, 39.91511908708907), // 定义第一个关键帧帧地图中心点zoom: 18, // 定义第一个关键帧地图等级tilt: 60, // 定义第一个关键帧地图倾斜角度heading: 0, // 定义第一个关键帧地图旋转方向percentage: 0 // 定义第一个关键帧处于动画过程的百分比取值范围0~1},{center: new BMapGL.Point(116.38096834279554, 39.9156803086881), // 定义第二个关键帧地图中心点zoom: 18, // 定义第二个关键帧地图等级tilt: 60, // 定义第二个关键帧地图倾斜角度heading: 0, // 定义第二个关键帧地图旋转方向percentage: 1 // 定义第二个关键帧处于动画过程的百分比取值范围0~1},]; 设置动画属性 var opts {duration: 10000, // 设置每次迭代动画持续时间delay: 3000, // 设置动画延迟开始时间interation: 1 // 设置动画迭代次数
};创建动画实例 var animation new BMapGL.ViewAnimation(keyFrames, opts); 播放动画 map.startViewAnimation(animation);
//传入动画实例强制停止动画 map.cancelViewAnimation(animation); // 强制停止动画!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://api.map.baidu.com/api?v1.0typewebglakPKzEC0PFNFaT789e0KYtbhEMTRGuvtbA/scriptstyle#container {width: 1000px;height: 900px;margin: 0 auto;border: 2px solid black;}/style
/headbodydiv idcontainer/divscript// 地图的实例var map new BMapGL.Map(container);//第一个参数为经度第二个参数为纬度var point new BMapGL.Point(116.404, 39.915);//第一个参数为中心点坐标第二个参数为地图级别map.centerAndZoom(point, 15);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 设置旋转角度map.setHeading(60);// 设置倾斜角度map.setTilt(75);// 自定义关键帧var keyFrames [{center: new BMapGL.Point(116.40396298757886, 39.91511908708907), // 定义第一个关键帧帧地图中心点zoom: 18, // 定义第一个关键帧地图等级tilt: 60, // 定义第一个关键帧地图倾斜角度heading: 0, // 定义第一个关键帧地图旋转方向percentage: 0 // 定义第一个关键帧处于动画过程的百分比取值范围0~1},{center: new BMapGL.Point(116.38096834279554, 39.9156803086881), // 定义第二个关键帧地图中心点zoom: 18, // 定义第二个关键帧地图等级tilt: 60, // 定义第二个关键帧地图倾斜角度heading: 0, // 定义第二个关键帧地图旋转方向percentage: 1 // 定义第二个关键帧处于动画过程的百分比取值范围0~1},];// 设置动画属性var opts {duration: 10000, // 设置每次迭代动画持续时间delay: 3000, // 设置动画延迟开始时间interation: 1 // 设置动画迭代次数};// 创建动画实例var animation new BMapGL.ViewAnimation(keyFrames, opts);// 播放动画map.startViewAnimation(animation);//传入动画实例setTimeout(() {// 强制停止动画map.cancelViewAnimation(animation); // 强制停止动画}, 30000);/script
/body/html
