会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题
WEB前端全系列/第九阶段:HTML5新特性模块/HTML5新特性 16楼
WEB前端全系列/第九阶段:HTML5新特性模块/HTML5新特性 18楼
WEB前端全系列/第九阶段:HTML5新特性模块/HTML5新特性 19楼
WEB前端全系列/第九阶段:HTML5新特性模块/HTML5新特性 21楼

index.zip

老师这个整体画布跟着在旋转颜色还都变成秒针的颜色了

WEB前端全系列/第九阶段:HTML5新特性模块/HTML5新特性 22楼
WEB前端全系列/第九阶段:HTML5新特性模块/(旧)H5新特性 23楼
WEB前端全系列/第九阶段:HTML5新特性模块/(旧)H5新特性 24楼

<!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>

    <input type="button" value="视频" onclick="getMedia()">

    <video src="" width="500px" id="video" height="500px" autoplay muted></video>

    <canvas id="canvas" width="500px" height="500px"></canvas>

    <button onclick="takePhone()" id='but'>拍照</button>

    <script>

        function getMedia(){

            var constraints={

                video:{width:500,height:500},

                audio:true

            };

            //获取摄像头区域

            var video=document.getElementById('video');

            //该方法返回promise对象

            //这个对象返回成功后得回调函数带一个mediaStream对象作为其参数

            //then()是promise的方法,异步执行,当then()前的所有方法执行完后再执行then()内部的程序

            //避免数据没有获取到

            var promise=navigator.mediaDevices.getUserMedia(constraints);

            promise.then(function(MediaStream){

                video.srcObject=MediaStream;

                video.play();

            });

        }

        function  takePhone(){

        var video=document.getElementById('video');

        var canvas=document.getElementById('canvas');

        var ctx=canvas.getContext('2d');

        ctx.drawImage(video,0,0,500,500);

    }

    </script>

</body>

</html>

image.png

我这里一直在报错

WEB前端全系列/第九阶段:HTML5新特性模块/(旧)H5新特性 25楼
WEB前端全系列/第九阶段:HTML5新特性模块/HTML5新特性 26楼
WEB前端全系列/第九阶段:HTML5新特性模块/(旧)H5新特性 27楼

<!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=1.0&&type=webgl&ak=FbonyatSbRvrD6W2ApVIpz5BGT9wE18a"></script>
    <title>百度地图</title>
    <style type="text/css">  
        html{height:100%}    
        body{height:100%;margin:0px;padding:0px}    
        #container{height:500px;width: 700px; border: 1px solid black;}    
    </style> 
</head>
<body>
    <div id="container"></div> 
    <button>加载</button>
    <script>
      var btn=document.querySelector('button');
      btn.onclick=function(){
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.404, 39.915);//设置中心点 经纬度
        map.centerAndZoom(point, 15);//地图初始化,同时设置地图展示级别 登记1-21  数值越大 
        /*地球模式*/
        // map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 15);  // 初始化地图,设置中心点坐标和地图级别
        // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
     //添加控件(系统)
//      map.addControl(new BMapGL.ScaleControl())//比例尺

//      map.addControl(new BMap.OverviewMapControl()); //缩略图
// //      var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
// // map.addControl(cityCtrl);
// map.addControl(new BMapGL.MapTypeControl())

/*自定义插件
自定义摆放位置
anchor:自定义摆放位置
offset:自定义偏移量offset(x,y)
type:控件加载类型
*/
var options={
    anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
    offset:BMAP_ANCHOR_BOTTOM_RIGHT,

}
map.addControl(new BMap.NavigationControl(options));

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

老师 是不是现在百度地图这个api没写出来的控件类型就用不了了  好像这个平移缩放和缩略图控件

image.png

image.png

WEB前端全系列/第九阶段:HTML5新特性模块/(旧)H5新特性 30楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637