有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Document</title>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=webgl&ak=XgpOvmATLiD7xu0G0HEvLECHAAEkRsPp"></script>
    <style>
        #container{
            width: 700px;
            height: 500px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <button>加载地图</button>
    <div id="container"></div><!--  容器 -->
  <script>
      var btn=document.querySelector('button');
      btn.onclick=function(){
        var map =  new BMap.Map("container");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15); 
        map.enableScrollWheelZoom(true);
        var option={
            anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
            offset:new BMapGL.Size(150, 5),
            type: BMAP_NAVIGATION_CONTROL_LARGE
        }
        map.addControl(new BMap.ScaleControl());//比例尺控件
        map.addControl(new BMap.ZoomControl());//缩放
        map.addControl(new BMap.NavigationControl(option));//平移缩放
        map.addControl(new BMap.MapTypeControl());//地图类型 右上角

      }
  </script>
</body>
</html>

老师为啥控件不显示

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 2楼

// 在秒针末端绘制小圆圈
            // ctx.beginPath()
            // ctx.arc(65, 0, 5, 0, 2 * Math.PI)
            // ctx.stroke()

这个小圆圈不是写死了吗，为什么会跟着秒针一起转动

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 3楼

请问这怎么解决啊？

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 4楼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=FbonyatSbRvrD6W2ApVIpz5BGT9wE18a"></script>

    <title>Document</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 500px;
            width: 700px;
            border: 1px solid black;
            margin: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div> <br>
    <label for="startPoint">
        起点：<input type="text" id="startPoint" value="广东省广州市越秀区环市西路179号">
    </label>
    <label for="endPoint">
        终点：<input type="text" id="endPoint" value="广东省广州市白云区广园西路133号">
    </label>
    <select>
        <option value="bus">公交</option>
        <option value="car">自驾</option>
        <option value="step">不行</option>
    </select><br>
    <button class="route">规划路线</button>
    <button class="load">加载</button>
    <script>
        var startPoint_input = document.querySelector('#startPoint');
        var endPoint_input = document.querySelector('#endPoint');
        var routeBtn = document.querySelector('.route')
        var map = null;
        document.querySelector('.load').onclick = function () {
            map = new BMap.Map("container");
            var point = new BMap.Point(113.26512290418745, 23.154485582798717);//设置中心点 经纬度
            map.centerAndZoom(point, 15);//地图初始化，同时设置地图展示级别 登记1-21  数值越大 
            map.addControl(new BMap.NavigationControl());//平移缩放
            //加载时所在地点标注
            var centerMarker = new BMap.Marker(point);
            map.addOverlay(centerMarker);
            centerMarker.addEventListener('click', function (eve) {
                var opts = {
                    width: 250,     // 信息窗口宽度    
                    height: 100,     // 信息窗口高度    
                    title: '你现在地址在：'  // 信息窗口标题   
                }

                var geoc = new BMap.Geocoder()
                geoc.getLocation(eve.point, function (info) {
                    var addressStr = info.address;
                    var infoWindow = new BMap.InfoWindow(addressStr, opts);  // 创建信息窗口对象    
                    map.openInfoWindow(infoWindow, map.getCenter());
                    event.stopPropagation();
                })

            })

            map.addEventListener('click', function (eve) {
                var geoc = new BMap.Geocoder()
                geoc.getLocation(eve.point, function (info) {
                    console.log(info);
                })

                var Marker = new BMap.Marker(eve.point);
                map.addOverlay(Marker);

            })
        }
        routeBtn.onclick = function () {
            startPoint_input_value = startPoint_input.value;
            endPoint_input_value = endPoint_input.value;
            var router_value = document.querySelector('select').value;
            switch (router_value) {
                case'bus':
                    {
                        var transit = new BMap.TransitRoute(map, {
                            renderOptions: {
                                map: map,
                                autoViewport: true
                            }
                        });
                        transit.search(startPoint_input_value, endPoint_input_value)
                    }

                    break;
                case 'car': {
                    var driving = new BMap.DrivingRoute(map, {
                        renderOptions: {
                            map: map,
                            autoViewport: true//自动切换视野
                        }
                    });
                    driving.search(startPoint_input_value, endPoint_input_value);//绘制路线图
                }
                    break;
                case 'step': {
                    var walk = new BMap.WalkingRoute(map, {
                        renderOptions: { map: map }
                    });
                    walk.search(startPoint_input_value, endPoint_input_value);//绘制路线图
                }
                    break;
            }

        }
    </script>
</body>

</html>

老师我为啥公交那个方案不会显示为啥汇报这些错

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 5楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas多个小球随机运动.html</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="400px" height="300px">您的浏览器不支持canvas，请升级浏览器！</canvas>
</body>
<script>
    /*var modul = (function () {
        function getElement(eleName) {
            return document.querySelector(eleName);
        }
        return {
            getElement:getElement
        };
    })();
    var canvas = modul.getElement("canvas");
    var ctx = canvas.getContext("2d");
    console.log(canvas);*/
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    function randomColor() {
        var r = parseInt(Math.random() * 256);
        var g = parseInt(Math.random() * 256);
        var b = parseInt(Math.random() * 256);
        var CircleColor = "rgb(" + r + "," + g + "," + b + ")";
        return CircleColor;
    }
    function Circle() {
        this.r = Math.floor(Math.random() * 20 + 11);
        this.x = Math.floor(Math.random() * (400 - this.r));
        this.y = Math.floor(Math.random() * (300 - this.r));
        this.speedX = Math.floor(Math.random() * 8);
        this.speedY = Math.floor(Math.random() * 6);
        this.color = randomColor();
    }
    Circle.prototype.circleSpeed = function () {
        this.x += this.speedX;
        if (this.x <= this.r){
            this.speedX = -this.speedX;
        }else if (this.x >= (400 - this.r)){
            this.speedX = -this.speedX;
        }
        this.y += this.speedY;
        if (this.y <= this.r){
            this.speedY = -this.speedY;
        }else if (this.y >= (300 - this.r)){
            this.speedY = -this.speedY;
        }
    };
    Circle.prototype.drawCircle = function () {
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    };
    var arr = [];
    for (var i = 0; i < 4; i++){
        arr[i] = new Circle();
    }
    var timer = setInterval(function () {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for (var i = 0; i < arr.length; i++){
            arr[i] = circleSpeed();
            arr[i] = drawCircle();
        }
    },18);
</script>
</html>

哪里有问题？

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 6楼

求老师帮忙看下我的代码哪里出错了，效果一直出不来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas小球动画</title>
    <style>
        canvas{
            border:1px solid;
        }
    </style>
</head>
<body>
    <canvas width="400" height="300">你的浏览器不支持canvas标签</canvas>
    <script>
        var mycanvas=document.querySelector('canvas');
        var ctx=mycanvas.getContext('2d');
        var x=50;
        var y=50;
        var speed=-1;
        var speedY=2;
        //绘制一个小球
        var timer=setInterval(function(){
            ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
            speed+=speed;
            if(x<=20){
                speed=Math.abs(speed);
            }else if(x>=380){
                speed=-speed;
            }
            speedY+=speedY;
            if(y>=280){
                speedY=-speedY;
            }else if(y<=20){
                speedY=-speedY;
            }
            ctx.beginPath();
            ctx.arc(x,y,20,0,2*Math.PI);
            // ctx.stroke();
            ctx.fillStyle='skyblue';
            ctx.fill();
            ctx.closePath();
        },60);
    </script>
</body>
</html>

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 7楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var expires=new Date(new Date().getTime()+1000*1000);
        document.cookie='password=13456; expires='+expires;
        var temarr=document.cookie.split('=');
        var obj={};
        obj[temarr[0]]=temarr[1];
console.log(document.cookie);
console.log(obj);
    </script>
</body>
</html>

老师这个为啥不行

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 8楼

老师这个地方不太明白，为什么，调用ctx.clip()之后，先绘制的黑色正方形跑上面来了，不是应该黄色的正方形在上面吗，他两为啥调换位置了

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 9楼

<script>
        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(res) {
                console.log(res);
                // 创建信息窗口
                var str = '当前地址：' + res.address;
                console.log(str);
                var infowindow = new BMapGL.InfoWindow(str, {
                    width: 100,
                    height: 50,
                    title: "提示"
                });
                map.openInfoWindow(infowindow, e.latIng)
            })
        })
    </script>

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 10楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{border: 1px solid red;}
    </style>
</head>
<body>
    <canvas width="300px" height="100px">你得u暗器不智灿canvas</canvas>
    <script>
        var mycanvas=document.querySelector('canvas');
        var ctx=mycanvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeRect(0,0,300,100);
        var counter=0;
        var obj={};
        //请求图片
        var arr=['谢谢惠顾.jpg','中将.jpg']
        for(var i=0;i<arr.length;i++){
            var img=new Image();
             img.src=arr[i];
             obj[i]=img
            img.onload=function(){
                counter++;
                if(counter==arr.length){
                    callback(obj)
                }

            }
        }
        function callback(obj){
            var num=Math.ceil(Math.random()*10);
            if(num==8){
               // mycanvas.style.background='ur('+arr[1]+')'
            }else{
                mycanvas.style.background='ur('+arr[0]+')'
            }

        }
    </script>
</body>
</html>

老师为什么我图片的文字出不来

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 11楼

grd.addColorStop(0, "red");

grd.addColorStop(0.5, "red");

grd.addColorStop(0.5, "yellow");

为什么最后一行第一个参数不是1，画出来也是最下角三角形红色，右上角三角形黄色？

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 12楼

老师你好请问视频里创建一个Obj 把img放进去，然后调用函数添加参数Obj有点没懂这个意思，不用这个也可以实现功能。那这个作用是什么。

07.zip

WEB前端全系列/第九阶段：HTML5新特性模块/（旧）H5新特性 13楼

老师，请问这个报错是什么意思呢，好像不影响我运行虽然但是

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 14楼

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#container{

width: 1000px;

height: 800px;

margin: 0 auto;

border: 2px solid black;

}

</style>

</head>

<body>

// 获取地图实例

var map = new BMapGL.Map('container');

// 设置中心点坐标

var point = new BMapGL.Point(116.404, 39.915);

map.centerAndZoom(point,15);

// map.enableScrollWheelZoom(true);

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

</script>

</body>

</html>

老师，这个滚轮缩放功能为啥实现不了呢

WEB前端全系列/第九阶段：HTML5新特性模块/HTML5新特性 15楼

同学您好